HTML Youtube тэг video url - Вставка видео с youtube - httpdoc.ru

HTML URL-адрес видео-тега Youtube - встроить видео YouTube

Youtube - это платформа для видеохостинга. Это отличная платформа, чтобы поделиться своим видеоконтентом со всем миром. Однако что, если вы хотите воспроизводить видео с YouTube на своем веб-сайте? Вы можете вставлять видео с YouTube, используя URL-адрес HTML-тега Youtube.

Youtube предоставляет встроенный URL-адрес видео с помощью <iframe> тега, который позволяет добавлять свои видео на любой веб-сайт. Размещение видео на веб-сайтах и ​​управление ими может оказаться сложным. Следовательно, лучше сначала загрузить их на YouTube, а затем добавить на веб-сайт.

Добавление видеороликов Youtube с использованием URL-адреса тега видео Youtube на веб-сайт увеличивает количество просмотров, а также улучшает качество контента веб-сайта и может привести к лучшему ранжированию в поисковых системах.

Шаги по встраиванию URL-адреса видео YouTube в HTML

Чтобы добавить и воспроизвести видео Youtube на веб-сайте, просто выполните следующие простые шаги:

  1. Загрузите на YouTube видео, которое хотите встроить.
  2. После загрузки воспроизведите видео на сайте youtube. Вы также можете выбрать любое видео, загруженное любым другим человеком.
  3. Щелкните правой кнопкой мыши по видео, откроется меню.
  4. В меню щелкните copy embed code .
  5. URL-адрес видео Youtube теперь скопирован, просто вставьте этот код в тело веб-страницы. Видео будет отображаться там, где был вставлен код.

Пример HTML для встраивания URL-адреса видео Youtube

Youtube использует теги <iframe> для добавления видео на другие веб-сайты. URL-адрес видео Youtube, который вы скопировали, выполнив указанные выше действия, необходимо вставить в тело вашего веб-сайта. Посмотрите на пример, чтобы понять подход:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Embedding a YouTube Video</title>
</head>
<body>
  <iframe width="560" height="315" src="/media/pages/images/jFGKJBPFdUA" frameborder="0" 

  allowfullscreen></iframe>
  
</body>
</html>

Выход

Embedding a YouTube Video

Атрибут автовоспроизведения видео YouTube

Если вы хотите, чтобы видео воспроизводилось автоматически при загрузке страницы, используйте автовоспроизведение. Автовоспроизведение - это функция Youtube, которая запускает видео независимо от того, воспроизводит его пользователь или нет.

Атрибут autoplay имеет два значения:

  • autoplay=0 (по умолчанию): видео не будет воспроизводиться автоматически, когда проигрыватель загружается в веб-браузере.
  • autoplay=1 : Видео будет воспроизводиться автоматически, когда проигрыватель загрузится в веб-браузере.

Примечание. Используйте функцию автовоспроизведения очень ответственно, так как это может сильно раздражать посетителя.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Youtube Video Autoplay </title>
</head>
<body>

<iframe width="420" height="345" src="//www.youtube.com/embed/jFGKJBPFdUA?autoplay=1">
</iframe>

</body>
</html>

Выход

HTML Youtube Video Autoplay

Атрибут "петли" видео YouTube

Цикл видео - это функция перезапуска видео с начала после его завершения.

Цикл имеет два значения:

  • loop=0 (по умолчанию): после того, как видео закончится, оно не перезапустится автоматически.
  • loop=1 : Видео будет воспроизводиться в цикле вечно.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Youtube Playlist Videos </title>
</head>

<iframe width="720" height="350" 
src="https://www.youtube.com/embed/https://youtu.be/QPGmwRNkffc&loop=1">
</iframe>

</body>
</html>

Выход

HTML Youtube Loop Videos

Атрибут управления видео YouTube

Элементы управления плеером Youtube можно включить / выключить вручную.

  • controls=0 : Видеопроигрыватель Youtube не отображает никаких элементов управления, таких как воспроизведение, пауза и т. Д.
  • controls=1 (по умолчанию): все элементы управления будут отображаться и доступны.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Youtube Video Control </title>
</head>
<body>

<iframe width="720" height="350" 
src="//www.youtube.com/embed/9aoUpCXY7uk?controls=0">
</iframe>

</body>
</html>

Выход

HTML Youtube Video Control