Как вставить видео на страницу

Короткий ответ

Вставьте <video> с атрибутом controls — появятся кнопки воспроизведения, громкости и полного экрана:

<video src="/media/flower.webm" controls width="320"></video>

Без controls видео показывается как картинка, и запустить его можно только из JavaScript.

Обложка и адаптивность

poster задаёт картинку, которая видна до запуска. Чтобы видео не вылезало за пределы экрана, ограничьте ширину, как у картинок:

<video src="/media/flower.webm" controls poster="/media/photo-400x250.jpg" style="width: 100%; max-width: 400px; height: auto;"></video>

Несколько форматов и субтитры

Вместо src можно перечислить файлы в <source> — браузер возьмёт первый, который умеет воспроизводить. Субтитры подключает <track>:

<video controls width="320">
  <source src="/media/flower.webm" type="video/webm">
  <source src="/media/flower.mp4" type="video/mp4">
  <track kind="subtitles" src="/media/flower-en.vtt" srclang="en" label="English">
</video>

Видео с YouTube и других сервисов

Чужие видео встраивают не через <video>, а через <iframe> с кодом, который даёт сам сервис. Об этом — статья про встраивание через iframe.

Частая ошибка

Для <video> указывают ссылку на страницу видеохостинга, например адрес ролика на YouTube. Элемент умеет проигрывать только сам файл видео (WebM, MP4), а страница сайта для него — не видео, и плеер остаётся пустым.