Встраивание видео с YouTube в HTML

Введение

HTML-тег <embed> можно использовать для включения различных типов контента, таких как изображения, видео и другие веб-страницы, в нашу веб-страницу. В этом лабораторном занятии мы будем использовать HTML-тег <embed> для добавления видео с YouTube на веб-страницу.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Структура HTML-документа

Создайте новый файл с именем index.html.

После создания файла index.html добавьте базовую структуру для HTML-документа с элементами <head> и <body>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Embed Tag Lab</title>
  </head>
  <body></body>
</html>

Добавить видео с использованием HTML-тега

Для добавления видео на вашу веб-страницу вам понадобится использовать код для встраивания видео с YouTube.

Перейдите на любое видео на YouTube.
Под видео нажмите кнопку "Поделиться", а затем кнопку "Встраивать". Откроется окно "Встраивание видео".
Скопируйте HTML-код, который отображается в окне "Встраивание видео".
Вставьте код в файл index.html внутри элемента <body>.
```
<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />
```

Установить ширину и высоту видео

Для избежания проблем с размером важно установить ширину и высоту видео.

Добавьте атрибуты height и width к тегу <embed>. Атрибут width определяет ширину видео, а атрибут height задает его высоту.
```
<embed
  src="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
/>
```

Сохраните файл index.html и откройте его в вашем веб-браузере, чтобы проверить, успешно ли было добавлено видео.

Добавить запасной вариант для несовместимых браузеров

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

Добавьте тег <object> с параметрами, определяющими тип встраиваемого контента и URL-адрес ресурса для встраивания.

<object
  type="text/html"
  data="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
>
  <p>
    Ваш браузер не поддерживает HTML5-элемент видео. Пожалуйста, обновите до
    современного браузера.
  </p>
</object>

Сохраните файл index.html и откройте его в браузере, не поддерживающем тег <embed>, например, Internet Explorer. Убедитесь, что альтернативный вариант работает.

Резюме

Поздравляем! Вы успешно научились добавлять видео на веб-страницу с использованием HTML-тега <embed>. Не забудьте проверить совместимость с браузерами и использовать альтернативный вариант, если необходимо.

HTML внешний контент/плагин