Видео YouTube в HTML
Иногда вам может потребоваться конвертировать ваши видео в другие форматы, чтобы они воспроизводились во всех браузерах. Однако конвертация видео в другие форматы может быть сложной и трудоёмкой. Более простой способ — встроить плеер YouTube непосредственно на вашу веб-страницу с помощью элемента <iframe>.
При сохранении или воспроизведении видео YouTube отображает его идентификатор, который можно использовать для ссылки на видео в HTML-коде.
Воспроизведение видео YouTube в HTML
Если вы хотите воспроизвести ваше видео на веб-странице, выполните следующие шаги:
- Загрузите видео на YouTube
- Запишите идентификатор видео
- Добавьте элемент
<iframe>на вашу веб-страницу - Укажите в атрибуте
srcURL-адрес видео - Используйте атрибуты
heightиwidthдля определения размеров плеера - Добавьте другие параметры в URL (например,
&rel=0, чтобы предотвратить появление нерелевантных рекомендованных видео после воспроизведения)
Пример воспроизведения видео YouTube в HTML с элементом <iframe>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Автоматическое воспроизведение YouTube
Вы также можете заставить видео воспроизводиться автоматически при посещении страницы. Для этого добавьте параметр в URL-адрес YouTube.
Если значение равно 0 (по умолчанию), видео не начнёт воспроизводиться автоматически при загрузке плеера. Если значение равно 1, видео начнёт воспроизводиться автоматически при загрузке плеера.
Примечание: Современные браузеры требуют наличия атрибута allow у iframe для корректной работы автозапуска и полноэкранного режима.
Пример автозапуска YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Помимо исходного URL, можно указать через запятую список видео для воспроизведения (плейлист YouTube).
Управление воспроизведением YouTube
Если значение равно 0, элементы управления плеером не будут отображаться. Если значение равно 1 (по умолчанию), элементы управления плеером будут отображаться.
Пример управления воспроизведением YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>Зацикливание YouTube
Если значение равно 0 (по умолчанию), видео воспроизведётся только один раз. Если значение равно 1, видео будет зацикливаться бесконечно.
Пример зацикливания YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube — использование HTML-тегов <embed> или <object>
Элементы YouTube <embed> и <object> устарели. Вместо них следует использовать <iframe>.
Пример добавления видео YouTube с помощью элемента <embed>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
</body>
</html>Пример добавления видео YouTube с помощью элемента <object>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>
</body>
</html>Практика
Какой HTML-тег используется для встраивания видео YouTube на веб-страницу?