Как вставить видео в html

Чтобы добавить видео используется специальный HTML-тег <video>. Он имеет важный атрибут src, значением которого будет являться путь до нужного видеофайла.

<video src="https://example.com/hexlet.mp4"></video>

Обратите внимание, что большинством браузером корректно обрабатывается именно формат .mp4, что делает его наиболее приоритетным при использовании тега <video>

А как сделать видео как в тикток или YouTube shots?

Для вставки видео в HTML страницу можно использовать тег <video>. Например:

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

В данном примере видео будет иметь ширину 320 пикселей и высоту 240 пикселей. Также добавлен атрибут controls, который отображает элементы управления видеоплеером (кнопки воспроизведения, паузы и т.д.). В качестве источника видео указан файл video.mp4.

Кроме MP4, можно добавлять другие источники видео с помощью дополнительных тегов, например:

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Браузер автоматически выберет подходящий источник видео в зависимости от его возможностей.

Своё видео вставляют тегом <video>. Атрибут controls добавляет кнопки воспроизведения:

<video controls width="640" poster="preview.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

Браузер возьмёт первый формат, который умеет воспроизводить. MP4 с кодеком H.264 поддерживают все браузеры, WebM обычно весит меньше. poster — картинка до запуска.

Атрибуты <video>

Видео с YouTube

Откройте видео → Поделиться → Встроить и скопируйте код:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Название видео"
  allowfullscreen></iframe>

Так же встраивают видео с Rutube и VK Видео — код есть в меню «Поделиться».

Адаптивное видео

Чтобы видео сжималось на телефоне и сохраняло пропорции:

video,
iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Вертикальное видео, как в Shorts и TikTok

Для вертикального ролика задайте пропорции 9:16 и ограничьте ширину:

.short {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
}

Ленту, которая листается по одному ролику, делают контейнером с scroll-snap-type: y mandatory, а каждому ролику задают scroll-snap-align: start.

Если видео не воспроизводится

• Неверный путь к файлу — проверьте его во вкладке Network в DevTools.
• Формат не поддерживается — сконвертируйте в MP4 (H.264).
• autoplay без muted — браузеры блокируют автозапуск со звуком.

HTML-разметку разбирают в бесплатном курсе «Основы веб-разработки».