Как вставить флэш-ролики, видео и аудио файлы в html документ? урок №18

Как разместить видео при помощи сервиса YouTube

Сервис YouTube – одна из наиболее масштабных библиотек видеозаписей в мире. Здесь можно как найти материалы на любую тематику, так и разместить собственный ролик. Поэтому большинство видео на WordPress сайты интегрируются при помощи кода.

Сделать это довольно просто. Достаточно загрузить нужное видео на Ютуб или выбрать ролик из уже имеющихся в открытом доступе.

Далее надо выполнить такие действия:

Под самим видео в правом нижнем углу жмем на кнопку «Поделиться».

Из предложенных способов выбираем иконку «Встроить».

Появится код, который надо скопировать.

Если требуется включать видео не с самого начала, то сразу же под кодом можно выбрать функцию «начало» и указать нужное время.

После этого создаем новую запись в WordPress или редактируем существующую и вставляем код в редактор.

Справа находим кнопку «Опубликовать» и постим статью с роликом.

При желании можно подогнать проигрыватель до необходимого размера. При размещении кода с YouTube автоматически устанавливаются базовые параметры проигрывателя, стандартные для поля сайта. Их можно изменить вручную.

Находим строку iframe width=»560″ height=»315″ src=youtube.com/ссылка, где задаем свои параметры ширины (width) и высоты (height).

Преимуществами данного способа являются:

• сравнительно быстрое размещение видео на сайте;
• отсутствие необходимости самостоятельно загружать ролик на WordPress;
• гарантия доступа к видео через YouTube.

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

Заходим на Ютуб и находим видео, которое нас интересует. Находим под видео кнопку «Поделиться». Для вставки на сайт выбираем «HTML-код».

Можно сразу скопировать полученный код и добавить на блог, но я рекомендую перед этим перейти в настройки. Нажимаем «Еще».

Нам открывается раздел Youtube с настройками видео.

Поясню что они значат и какие из них вам нужны.

• Размер видео — выбирайте под ширину вашего сайта. Если у вас адаптивный сайт, проверьте отображение на мобильных устройствах. При качественной верстке видео будет подстраиваться под ширину;
• Показывать похожие видео после завершения просмотра — если вы добавили видео строго по теме, то рекомендую убрать галочку. Для развлекательных проектов и где задача удержать как можно больше посетителя на сайте — оставляйте;
• Показывать панель управления — рекомендую включать: очень раздражает, когда не можешь промотать или остановить ролик;
• Показывать название видео и функции проигрывателя — по желанию;
• Включить режим повышенной конфиденциальности — если включить этот режим, то Youtube будет сохранять информацию о посетителях только в том случае, если они досмотрят ролик до конца. На деле ни на что не влияет.

Помимо видимых настроек, есть те, которые скрыты — дополнительные настройки видео:

• autoplay=1 — начинает воспроизводить видео сразу после загрузки страницы. Не рекомендую;
• loop=1 — зацикливает видео;
• fs=0 — запрещает разворачивать видео на весь экран. Убирает соответствующую кнопку на панели управления;
• fmt=6 — задает качество видео. fmt=18 — среднее, fmt=22 — наилучшее. Полезно применять только если у вас красивый красочный ролик, смысл которого именно передать красоту. Во всех остальных случаях советую оставить это на выбор зрителя;
• iv_load_policy=3 — один из самых полезных параметров. Отключает аннотации к видео, такие как ссылки на канал автора и его другие ролики. Но не отключает рекламу Google.

Добавлять параметры просто: в коде после идентификатора видео добавляем знак «?» и пишем параметры, перечисляя их через «&». Ниже правильный пример:

XHTML

<iframe width=»560″ height=»315″ src=»https://www.youtube.com/embed/aAhPaiajwDY?showinfo=0&autoplay=1&iv_load_policy=3″ frameborder=»0″ allowfullscreen></iframe>

После настроек, копируем полученный код и вставляем на страницу сайта, предварительно перейдя в режим html-кода. В админке WordPress переключается здесь:

После вставки не забудьте сохранить и проверить на сайте. Собственно, вот как это выглядит у меня. Сам видеоролик вы можете посмотреть в конце статьи.

Если у вас сайт написан на одном html, или это просто локальных html-файл — инструкция точно такая же. Повторяйте.

Встраивание проигрывателя во фрейм

Для начала предалагаю рассмотреть пример, в котором используется рекомендованный способ добавления видео. И так, для добавления видео на страницу сделайте по порядку следующие действия:

• Если вы хотите использовать на сайте ваше видео, то необходимо его предварительно загрузить на YouTube, для этого необходимо иметь аккаунт и провести минимальные настройки своего канала (будем считать что этот шаг Вами пройден).
• Запишите ID видео (последние символы в адресной строке ?v=VIDEO_ID).
• Определите размеры <iframe> элемента на вашей веб-странице (атрибуты width и height). Хочу сразу подчеркнуть, что встраивать проигрыватель с помощью элемента <iframe> является лучшей практикой, таким образом вы предоставите пользователю оптимальные условия просмотра вне зависимости от типа его устройства или формата воспроизводимого файла).
  Если вы пропустили тему, посвященную фреймам в HTML, то рекомендую Вам к ней вернуться для изучения.

Примечание из официальной документации: Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.
Добавьте путь к видео, используя атрибут src и записанный ранее ID необходимого видео (https://www.youtube.com/embed/VIDEO_ID).
Справочно: Раньше региональные блокировки видео можно было обходить тем, что вместо /embed/ можно было указать /v/.

Давайте рассмотрим пример добавления видео с YouTube:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height).
В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

• autoplay = «1» (видео автоматически запускается).
• loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
• start = «28» (определяет с какой секунды начнется воспроизведение видео, значение должно быть положительным целым числом).
• color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Рис. 52 Добавление видео с YouTube во фрейм.

Есть еще один способ, который позволяет формировать HTML код для размещения плеера YouTube с интересующим нас видео.
Для этого необходимо найти на YouTube это видео, пролистать под описание к видео, найти и нажать на кнопку «Поделиться».
После этого нам будет доступно меню в котором необходимо выбрать вкладку «HTML-код». У нас есть два варианта: сразу скопировать готовый код сформированный по умолчанию, либо нажать на вкладку «Еще» и провести более расширенную настройку:

Рис. 53 Настройка фрейма на сайте YouTube.

В расширенных настройках, к примеру, можно включить режим повышенной конфиденциальности, который указывает, что YouTube должен сохранять информацию о посетителях вашей веб-страницы, только если они посмотрят ролик.

Обратите внимание, что YouTube добавляет такие атрибуты как frameboarder, который отвечает за наличие, либо отсутствие рамки вокруг фрейма и атрибут allowfullscreen, который позволяет перевести плеер в полноэкранный режим.
Обращаю ваше внимание, что этих атрибутов нет в спецификации HTML 5, не смотря на это атрибут frameboarder убирает границы фрейма, но при валидации документа быдет указана ошибка. В HTML 5 рекомендуется границы элемента добавлять, либо убирать средствами CSS, подробно об этом мы изучим в учебнике CSS в статье «Границы элемента в CSS»

Самые обсуждаемые

API-интерфейс видео HTML5

API-интерфейс для видео HTML5 весьма прост, однако он также находится в
процессе развития. Не следует забывать, что развитие спецификации HTML5
осуществляется не консорциумом WC3, а поставщиками браузеров. Такой
процесс стимулирует инновации, поскольку каждый браузер может иметь свои
уникальные функции. Во всех остальных аспектах API-интерфейс, описанный в
, в значительной степени согласован
между поддерживающими его браузерами.

Таблица 1. API-интерфейс видео HTML5

Различие между атрибутами и свойствами заключаются в следующем:
свойства невозможно использовать в разметке, а
атрибуты могут быть использованы и в разметке, и в скрипте.
Атрибут элемента имеет
приоритет над атрибутом элементов .
При использовании в разметке элементов атрибут
представляет собой пустую строку. Единственными
немедленно доступными являются свойства и
, которые устанавливают размер контейнера. Все
остальные свойства доступны после загрузки метаданных видеоконтента.

Ошибки API-интерфейса

На данный момент браузеры не имеют никаких критических ошибок, однако
программное обеспечение Apple iPad имеет определенные ошибки, которые
влияют на нынешний API-интерфейс:

• Ошибка динамической загрузки видео. Если создать элемент
  с , элементы
  не сработают автоматически. Решение состоит в том,
  чтобы установить атрибут и вызвать метод
  . См. пример в .
• Ошибка порядка элементов source. Если первый элемент source
  соответствует видеоформату, отличному от MP4, то iPad остановится в
  этом месте и не будет осуществлять загрузку. Решение состоит в том,
  чтобы первым в списке всегда следовал элемент source для формата MP4.
• Ошибка отображения постера. iPad не показывает изображение постера.
  Скорее всего, эта ошибка будет устранена в ближайшее время, а до этого
  решение состоит в создании соответствующего HTML-элемента
  для использования вместо постера.

Листинг 5. Исправление ошибки динамической
загрузки iPad

window.onload = function(){
	var video = document.body.appendChild(document.createElement('video'));
	if(video.canPlayType("video/ogg")){
		video.src = "video/myMovie.ogv";
	}else if("video/mp4"){
		video.src = "video/myMovie.mp4";
	}
	video.load();
}

Загрузка клипов с локального компьютера

Для того чтобы загрузить видео с вашего компьютера, для удобства нужно разместить его возле создаваемой html-страницы. Далее использовать один из плееров. Для примера я использовал специализированный плеер под названием Flowplayer. Он выложен в интернет в свободном доступе и скачать его не проблема.

Впервые за все наши написанные примеры мы затронем код языка javascript. Так как данный инструмент значительно расширяет возможности веб-языков и делает сайтостроение более гибким, он идеально подходит для данного случая.

Для начала откройте документ с кодом примера и сразу после закрывающегося тега </style> вставьте строку, подключающую плеер к нашей странице. Текст примера скопируйте ниже:

Далее после второго заголовка необходимо вставить текст, состоящий из html и js языков:

1
2
3
4
5
6
7
8
9
10
11
12

<h1>Способ 2: добавление видео с помощью плеера</h1>
<div align="center">
 
<script type="text/javascript">
  flowplayer("player",  "http://путь, по которому вы сохранили файл/flowplay/flowplayer-3.2.2.swf",
  {
    clip: {
        autoPlay: false, 
    }
});
</script>
</div>

Вам нужно изменить 2 строки данного кода. В a href= «1.mp4» укажите название своего видеодокумента. Если он лежит не рядом с создаваемой страницей, то до названия через слеш нужно добавить имя каталога. Например, my/1.mov. И вторая строка в скриптовом коде. Пропишите свой путь к файлу.

Сортировка и фильтр по цвету с помощью функций

Коротко о других основных кодах-ошибках по протоколу HTTP

Пример кода тега

Пример добавления видеофайла при помощи тега :

<video width="560" height="315" controls="controls" poster="teg-video.jpg">
    <source src="norwegian-army-harlem-shake.ogv" />
    <source src="norwegian-army-harlem-shake.mp4" />
</video>

Результат:

Странно, Safari почему то не видит тега видео.

Автор ролика: Норвежская армия,
Название: Garlem Shake.
Скачать файл можно c Яндекс.Диска: в формате OGG, в формате MP4,
Постер: http://yadi.sk/d/i24KhBiT3o0Vb

Тег содержит в себе атрибут , чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение. Если ваш браузер не поддерживает файлы с расширением .ogv, то он будет проигрывать файлы с расширением .mp4

Способ № 1. Вставка медиа-контента (видео) посредством тегов HTML5

Существует несколько способов вставки видео контента на веб-страницу. Выделяют три варианта: вставка посредством HTML, плеера или YouTube. Для начала нужно создать обычный HTML5-файл, который будет содержать в себе стили страницы и несколько подзаголовков. После подготовки можно выбирать один из методов и наслаждаться результатом.

1. Найти третий заголовок и прописать код прямо под ним:
2. Открыть страницу в браузере и убедиться в появлении видео.
3. Обязательно нужно правильно прописать путь к ролику.
4. Чтобы вставка видео в HTML была грамотной, нужно разметить панель контроля видео. За это отвечает параметр controls.

Следует учесть, что такой способ примечателен не для всех. К примеру, в браузере Opera видео, размещенное таким способом, воспроизводиться не будет. Чтобы избежать такой ситуации, нужно конвертировать видеоролик в тип Ogg Theora, изменить код.

Конвертировать файл можно посредством сервиса online-convert.com. Затем нужно изменить код на такой:

Если старый браузер не понимает какой-то тег, тогда код может выглядеть следующим образом.

7. Подключение видео с Vimeo

Подключается почти также, как и YouTube

Через

<div class=»plyr__video-embed» id=»player»>
<iframe
src=»https://player.vimeo.com/video/151297208?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media»
allowfullscreen
allowtransparency
allow=»autoplay»
></iframe>
</div>

Через

<div id=»player» data-plyr-provider=»vimeo» data-plyr-embed-id=»151297208″></div>

Учимся добавлять на веб-ресурс видео

Когда возникает желание предоставить возможность пользователям сайта смотреть видеоуроки или клипы с ютуба, то сразу же перед разработчиком возникает вопрос: «А каким именно образом мне стоит загрузить видеоконтент?»

На сегодняшний день существует множество разных лазеек, вариантов и даже костылей. Я хочу рассказать о трех самых простых и удобных вариантах вставки видео.

Если вы хотите усвоить данный материал, то советую вам не лениться, а собрать всю свою волю в кулак и проработать примеры самостоятельно. Хочу напомнить, если у вас нет профессиональной среды разработки или хотя бы Notepad ++, то вооружитесь программой «Блокнот».

Итак, я научу вас вставлять видеодокументы тремя способами:

• используя ссылку с YouTube;
• загружая клипы с локального компьютера;
• пользуясь стандартными механизмами html5.

Но для начала нужно подготовить каркас будущей страницы. Для этого через блокнот создаем документ с расширением .html (как правильно создавать веб-страницы через «Блокнот» я писал в первых уроках) и вставляем туда ниже представленный код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Вставка видео из разных источников</title>
    <style>
		body {
		background:#FFFAF0; 
		color:#A52A2A;
		width:100%;
		margin:0;
		text-align:center;
		}
		h1{ 
		font-style: oblique;
		text-decoration: underline;
		}
	</style>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Способ 1: добавление видео с веб-сервиса YouTube</h1>
	<h1>Способ 2: добавление видео с помощью плеера</h1>
	<h1>Способ 3: добавление видео при помощи тегов html5</h1>
  </body>
</html>

Сохраните заготовку программы. При запуске файла в окне браузера откроется веб-страница с тремя стилизованными заголовками.

Как поставить фильтр в Экселе на столбец с числами

Ленивая загрузка встроенных видео

Если вы планируете добавит несколько видео на страницу, то можете столкнуться
со значительным увеличением времени загрузки. Пользователь может быть даже не
запустит плеер, а уже скачает лишние ресурсы.

Чтобы решить ту проблему мы будем использовать вместо плеера крошечную
встраиваемую страницу с превью видео и кнопкой. А при нажатии на нее будет загружаться плеер.

Хитрость будет заключаться атрибуте iframe — srcdoc в который мы поместим HTML нашего превью.

Шорткоды для вставки видео

Существует достаточно большое количество ультимативных наборов шорткодов для вставки самых разных элементов в контент страниц Joomla, и практически каждый из них имеет в своём арсенале короткий код для вставки видео. Самым достойным представителем в линейке подобных расширений является Shortcode Ultimate.

Вставлять шорткоды Shortcode Ultimate — одно удовольствие. Чтобы добавить видео с YouTube:

1. нажимаем кнопку Вставить шорткод в текстовом редакторе;
2. из списка элементов во всплывающем окне находим и выбираем YouTube видео;
3. вставляем ссылку на видео и при необходимости настраиваем другие параметры;
4. можно просмотреть результат в текущем окне, нажав Предварительный просмотр;
5. жмем Вставить шорткод.

Короткий код будет выглядеть так:

[youtube url="https://www.youtube.com/watch?v=tj_V7BDHTxk"]

Как и в случае с AllVideos, данный код на выходе преобразуется в HTML, отображающий указанное видео. Если мы опять посмотрим в код страницы, то снова увидим несколько ресурсных файлов, добавляемых плагином, которые также не лучшим образом сказываются на скорости загрузки. Тем не менее, применение Shortcode Ultimate для вставки видео в Joomla 3 является более предпочтительным относительно AllVideos по следующим причинам:

• ультимативный набор шорткодов;
• кнопка редактора для вставки шорткодов;
• наглядная настройка параметров видео;
• никаких проблем с JCH Optimize.

Атрибуты тега AUDIO

autoplay — аудио воспроизводится автоматически сразу после загрузки веб-страницы;

controls — панель управления к аудио плееру;

height — высота аудио плеера;

loop — повтор воспроизведение аудио сначала после его завершения;

src — путь к аудио файлу

Пример:

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>ТЕГ AUDIO</title>
</head>
<body>
<AUDIO SRC="bloggood-ru.mp3" controls="controls" autoplay="autoplay" loop="loop"></AUDIO>
</body>
</html>

Результат:

Вставить видеоролик на веб-страницу можно и тегом <VIDEO>:

<VIDEO SRC="kino.ogg"></VIDEO>

6. Подключение видео с YouTube

Видео с YouTube можно подключить двумя способами.

Через с прогрессивным улучшением (используя embed). Данный метод рекомендуется.

<div class=»plyr__video-embed» id=»player»>
<iframe
src=»https://www.youtube.com/embed/6wJAdfTJZUQ»
allowfullscreen
allowtransparency
allow=»autoplay»
></iframe>
</div>

Примечание: класс сделает плеер формата 16:9. Когда плеер включится, будет использоваться пользовательский параметр конфигурации ratio

Второй вариант через

<div id=»player» data-plyr-provider=»youtube» data-plyr-embed-id=»6wJAdfTJZUQ»></div>

Примечание: атрибут может быть либо идентификатором видео, либо его URL-адресом.

Атрибуты тега

— начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :)).

— создает панель управления видеофайлом, по умолчанию атрибут отключён.

— задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение или равен высоте постера, если задан атрибут poster=» «.

— задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение или равен ширине постера, если задан атрибут poster=» «.

— заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

— указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.

— загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение
Определения значений: — загружает видеофайл, — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д., — не загружает видеофайл.
Атрибут preload=» » не работает, если включен атрибут autoplay=» «

— указывает путь к видеофайлу.

В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.

Тегом video можно управлять через CSS.

Читать далее: тег source

Вставка видео в WordPress и не только

Теперь рассмотрим самый простой способ как вставить видео с Youtube на сайт WordPress. Данную систему использует большинство блогов и не только. Сначала пару слов о реализации через текстовый редактор, о чем я говорил выше, а потом покажу вариант с HTML.

Помнится, раньше для решения задачи даже были какие-то специальные wp плагины, но сейчас все гораздо проще, я бы сказал элементарно.

Чтобы вставить видео на сайт WordPress:

1. Заходите в админку своего веб-проекта и выбирайте добавление/редактирование записи.
2. Затем в текстовом редакторе просто размещаете ссылку на Youtube видео.
3. В 99% случаев система автоматически преобразует линк (как показано на гифке ниже).

Интересно, что в последних версиях CMS данный прием работает в обеих режимах редактора. В «Визуальном» вы можете сразу увидеть преобразование, а в HTML подмена линка на видео будет видна при сохранении и просмотре опубликованной записи.

Возможно, в других системах такой функции нет, и придется использовать вариант с HTML. В таком случае для вставки видео с Youtube на сайт Joomla будь то или Вордпресс, или любая другая CMS вам нужно:

1. Зайти в текстовый редактор в режим HTML.
2. Скопировать код из ютуба в область контента.
3. Сохранить страницу/запись в том же HTML режиме.

Иногда такой подход удобнее, если надо подправить некоторые параметры тега, например, размер плеера. Кроме всего прочего лично я добавляю абзацу с роликом выравнивание по центру. 

Вставляем видео при помощи ссылки

Как вставить видео с хостинга Ютуб на свой сайт: для этого используется тег <iframe>. Он создаст html-документ, что открывается вместе с базовой страницей. Он будет как всплывающее окно. При использовании данного тега содержимое статьи и основной страницы всегда в приоритете.

Команда содержит такие элементы:

• width, height – это размеры (ширина и высота соответственно);
• autoplay — автозапуск при запуске страницы;
• controls — вывод инструментов управления;
• loop — автоповтор;
• poster — команда на демонстрацию картинки, которая выводится при неполадках с показом видеоряда;
• preload — загрузка фильма одновременно со страницей;
• src – путь (адрес, URL);
• frameborder – рамка. Если стоит «0», ее не будет;
• allowfullscreen – полноэкранный режим.

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

1. Откройте YouTube на компьютере и перейдите на страницу нужного видео.
2. Нажмите Поделиться под проигрывателем.
3. Выберите Встроить.
4. Скопируйте код.
5. Добавьте код в свой блог или на сайт.

Примечания

• Если вы встраиваете ролики с YouTube на ресурс, предназначенный для детей, вам необходимо указать его целевую аудиторию. На сайтах и в приложениях для детей не демонстрируется персонализированная реклама и недоступны некоторые функции встроенного проигрывателя.
• Ролики с возрастными ограничениями нельзя посмотреть на большинстве сторонних сайтов. Если зритель попробует воспроизвести их, то будет перенаправлен на YouTube.

Обратите внимание, что действие Условий использования YouTube API и Правил для разработчиков распространяется и на встроенный проигрыватель

Зачем вам нужно вставить видео с Ютуба на сайт

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

В нескольких словах я сейчас расскажу, для чего просто необходимо встроить видео с youtube на сайт и что это даст вашему сайту.

1. Улучшается поведенческий фактор заметки, ведь читатели задерживаются на странице дольше, потому что, помимо чтения, могут ещё и видео посмотреть, им это удобнее: кто-то любит тексты читать и воспринимает лучше письменную информацию, кто-то предпочитает видосик посмотреть, а кто-то – и то и другое.
2. Поисковики отдают статьям, в которых есть видео, больший приоритет, чем аналогичным схожего качества по тем же поисковым запросам, поскольку раз есть видеоролик, значит тема раскрыта ещё лучше.

Проще говоря, когда есть подходящее видео с youtube, то лучше вставить его на сайт, чем не делать этого. Чтобы позволить лучше продвигаться, желательно использовать именно ваш собственный уникальный ролик, а не чужой, поскольку этот фактор также учитывается поисковыми системами. Пример встроенного видео на моём блоге:

Настройка YouTube видео в HTML5

Теперь, когда вы знаете, как вставлять видео YouTube в формате HTML, вы должны также понять , как модифицировать его под ваши цели.
Добавляя некоторые параметры в конце URL адреса видео, вы можете влиять на поведение плеера.
Для этого добавьте знак вопроса ? в конце URL, а затем добавить один или несколько
параметров и их значения.

Параметр autoplay позволяет начать автоматическое воспроизведение YouTube видео при загрузке страницы. Добавьте autoplay=1 в конец URL
чтобы включить автовоспроизведение или autoplay=0 чтобы выключить.

Параметр loop позволяет зациклить видео, цикл будет длиться, пока пользователь останавливает его вручную.
Использование loop=1 запустит видео снова после того, как она закончится, а
loop=0 остановит видео после первого воспроизведения.

Параметр playlist установит плейлист на вашем сайте, несколько YouTube видео будут воспроизведены один за другим в последовательном порядке.
Это позволит создать личный список воспроизведения на вашем сайте.

Посмотрите еще несколько параметров, которые вы можете использовать в таблице ниже:

Параметр

Значение

color

При установке значения white, уже просмотренная часть видео будет выделена белым в прогрес баре.

disablekb

При установке значения 1, видеопроигрыватель не будет реагировать на управление с клавиатуры

fs

Если установлено значение 0 , кнопка полноэкранного режима будет добавлена в плеер

modestbranding

При установке значения 1 , видеоплеер не будет показывать логотип YouTube