Видео и аудио в HTML: video, audio, iframe, встраивание YouTube

<video src="intro.mp4" controls width="640" height="360">
  Ваш браузер не поддерживает видео.
</video>

<video controls width="640" height="360">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.ogv" type="video/ogg">
  Ваш браузер не поддерживает видео.
</video>

<video
  src="intro.mp4"
  controls
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  poster="preview.jpg"
  width="640"
  height="360"
>
</video>

<video autoplay muted loop playsinline class="hero-video">
  <source src="hero-background.webm" type="video/webm">
  <source src="hero-background.mp4" type="video/mp4">
</video>

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subs-ru.vtt" srclang="ru" label="Русский">
  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English">
  <track kind="captions" src="captions-ru.vtt" srclang="ru" label="Русские субтитры">
</video>

WEBVTT

00:00:01.000 --> 00:00:04.000
Привет, добро пожаловать на канал.

00:00:05.000 --> 00:00:08.000
Сегодня мы разберём HTML5 video.

const video = document.querySelector('video')

video.play()
video.pause()
video.currentTime = 30
video.volume = 0.5

video.addEventListener('timeupdate', () => {
  console.log(`Текущая позиция: ${video.currentTime}`)
})

video.addEventListener('ended', () => {
  console.log('Видео закончилось')
})

video.playbackRate = 1.5
video.requestFullscreen()

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Ваш браузер не поддерживает аудио.
</audio>

<audio src="music.mp3" controls loop preload="metadata"></audio>

<audio id="player" controls>
  <source src="track1.mp3" type="audio/mpeg">
</audio>

<ul id="playlist">
  <li data-src="track1.mp3" class="active">Трек 1 — Артист</li>
  <li data-src="track2.mp3">Трек 2 — Артист</li>
  <li data-src="track3.mp3">Трек 3 — Артист</li>
</ul>

const player = document.getElementById('player')
const playlist = document.getElementById('playlist')

playlist.addEventListener('click', (e) => {
  const item = e.target.closest('li')
  if (!item) return

  player.src = item.dataset.src
  player.play()

  playlist.querySelector('.active')?.classList.remove('active')
  item.classList.add('active')
})

player.addEventListener('ended', () => {
  const current = playlist.querySelector('.active')
  const next = current.nextElementSibling
  if (next) {
    next.click()
  }
})

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Название видео"
  width="560"
  height="315"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
></iframe>

https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&rel=0

<iframe
  src="https://player.vimeo.com/video/VIDEO_ID"
  title="Название видео"
  width="640"
  height="360"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Видео" allowfullscreen></iframe>
</div>

<iframe
  src="untrusted.html"
  sandbox="allow-scripts allow-same-origin"
></iframe>

<iframe
  src="widget.html"
  sandbox="allow-scripts"
  referrerpolicy="no-referrer"
  loading="lazy"
></iframe>