Способы вывода видео на web страницу в html коде

В этой статье разберём два основных способа вставить видео на страницу:

1. использовать собственный файл (через тег <video>),
2. встроить видео с YouTube (через <iframe>).

---

🧩 Часть 1. Встроенное или загруженное видео: тег <video>

Если у вас есть собственное видеофайл — например, promo.mp4, — то самый правильный способ вставить его в HTML — это использовать тег <video>. Этот тег появился в HTML5 и позволяет встроить медиаконтент без плагинов вроде Flash.

Простейший пример:

<video src="video/promo.mp4" controls></video>

Тут всё просто:

• src — путь к видеофайлу,
• controls — добавляет стандартную панель управления (воспроизведение, пауза, громкость и т.д.).

Если не указать controls, видео просто не будет иметь интерфейса, и пользователь не сможет им управлять.

---

🔧 Основные атрибуты тега <video>

• controls — отображает панель управления.
• autoplay — видео запускается автоматически при загрузке страницы (но не всегда работает без звука).
• muted — отключает звук по умолчанию (часто используется вместе с autoplay).
• loop — зацикливает воспроизведение.
• poster — путь к изображению-заставке, которая отображается до начала воспроизведения.
• preload — управляет предварительной загрузкой (none, metadata, auto).

---

Пример с несколькими источниками

Чтобы видео корректно работало во всех браузерах, можно указать несколько форматов:

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

Если браузер не поддерживает первый формат, он попробует следующий. Текст внутри тега (Ваш браузер не поддерживает...) отобразится, если <video> вообще не поддерживается.

---

Пример с автозапуском и зацикливанием

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

Этот вариант часто используют для фона на сайте.
Обратите внимание на muted — без него большинство браузеров заблокируют автозапуск.

---

🎬 Часть 2. Видео с YouTube: тег <iframe>

Если видео размещено на YouTube, не нужно хранить тяжёлые файлы у себя — можно просто встроить плеер через тег <iframe>.

Как это делается

1. На странице видео на YouTube нажмите Поделиться → Встроить.
2. Скопируйте сгенерированный код.
3. Вставьте его в свой HTML.

Пример:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

---

Что делают эти атрибуты

• src — адрес встроенного плеера (обратите внимание на /embed/ в URL).
• width / height — размеры плеера.
• title — текстовое описание для доступности.
• frameborder="0" — убирает рамку вокруг плеера (по умолчанию).
• allowfullscreen — разрешает переход в полноэкранный режим.
• allow — определяет, какие функции доступны плееру (автовоспроизведение, буфер обмена, управление гироскопом и т.д.).

---

💡 Как сделать видео адаптивным

Чтобы плеер корректно масштабировался под разные экраны, используйте обёртку с CSS:

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Теперь видео будет подстраиваться под ширину родительского контейнера — хоть в мобильной версии, хоть на десктопе.

---

⚙️ Подводим итог

• Для локальных видео — используйте <video>. Это нативный, гибкий, современный способ с хорошей поддержкой браузерами.
• Для видео с YouTube — <iframe> остаётся лучшим выбором: он прост, не нагружает ваш сервер и поддерживает встроенные настройки плеера.

А если вы хотите сделать сайт с видео максимально удобным — добавьте JavaScript-контроль, кастомные кнопки и плавающие превью, но это уже тема для отдельной статьи 😉