Несколько способов сделать всплывающее окно со встроенным YouTube видео.

В данном уроке я разберу 3 способа вставки всплывающего окна на сайт. В уроке мы скачаем и установим специальный плагин YouTube FancyBox для сайтов работающих на движке WordPress, настроим стили окна, встроим и опубликуем своё первое видео которое будет показываться во всплывающем красивом окне с помощью нашего плагина.

Вторым способом мы разберём установку всплывающего окна с помощью JQuery библиотек опять же от FancyBox только на простой HTML сайт. Возможно вам пригодиться данное решение для создания подписных или продающих страниц.

Третьим способом мы разберём установку всплывающего окна со встроенным в него видео с YouTube работающего на простом HTML сайте с помощью простых CSS стилей.

У каждого способа есть свои плюсы и минусы. Подробнее смотрите примеры и видео уроки ниже. Улучшайте функционал ваших сайтов с помощью всплывающих окон со встроенным в них видео.

Смотреть видео:
Плагин YouTube FancyBox настройка окна с видео. Всплывающее оно для WordPress

Прямая ссылка просмотреть урок на YouTube

Скачать плагин на WordPress.Org: YouTube FancyBox

Скачать исправленную версию плагина, которую сделали в уроке:
https://yadi.sk/d/pxd8a8gx32K4KL

 

Пример HTML кода из урока:
<a class="youtube cboxElement" href="http://www.youtube.com/embed/6zTFJRAXujA?rel=0&enablejsapi=1&color=red&showinfo=0&vq=highres&modestbranding=1&buffering=0&loop=0&rel=0&autoplay=1&wmode=transparent">
<img class="alignnone wp-image-966" src="http://yogasferaom.ru/wp-content/uploads/2016/12/Snimok-yekrana-2016-12-05-v-22.43.54-1024×572.png" alt="snimok-yekrana-2016-12-05-v-22-43-54" width="650" height="363" />
</a>

Глобальные настройки встраиваемого видео плеера с YouTube.

Ниже приведены дополнительные коды которые включают или отключают не нужные функционал.

Список команд YouTube плеера которые можно включить или отключить.

1) rel=(1/0) Значения: 1 или 0. Значение по умолчанию: 1. Если значение равно 0, то выключается показ похожих видео в конце.

2) enablejsapi=(0/1) [HTML5, AS3]:
Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 включает API Javascript. Дополнительные сведения об API Javascript и его использовании см. в документации по API JavaScript.

3) vq=(Quality) Загрузка видео сразу в высоком качестве. Можно использовать значение Quality может принимать значения: default, hd720, hd1080, highres, large, medium, small. По умолчанию стоит vq=default. Данный параметр позволяет сразу задать вашему видео высокое качество воспроизведения. Это удобно, так как по умолчанию Ютуб проигрывает видео в среднем качестве (360p или 480p). То есть, в том, которое без проблем потянет медленный интернет.

4) autoplay=(0/1) Значения: 0 или 1. Значение по умолчанию: 0. Значение 1 активирует автоматическое воспроизведение видео сразу после запуска. То есть, как только посетитель попадет на ваш сайт, ролик начнет воспроизводиться сразу, без дополнительных действий с его стороны. При такой настройке просмотры на YouTube не учитываюся.

5) start=N  Воспроизведение с нужной секунды, где вместо N мы просто указываем значение. Например, команда start=60 задает показ видео со 1-ой минуты.

6) end=N  Остановка в нужное вам время в секундах, используется в паре с start.

7) showinfo=(1/0) Значения: 1 или 0. Значение по умолчанию: 1. Значение 0 скрывает название и информацию о видео в верхней части видео.

8) controls=(1/0) Значения: 1 или 0. Значение по умолчанию: 0. Значение 1 скрывает полностью нижнюю панель управления перемоткой и просмотром. Пользователю становится недоступной полоса прокрутки, настройка звука и качества. В этом случае, в правом нижнем углу появляется кликабельное лого YouTube.

9) disablekb=(1/0) Значения: 1 или 0. Значение по умолчанию: 0. Значение 1 отключает управление воспроизведением видео с клавиатуры, в частности останавливать его пробелом и прокручивать стрелками вперед или назад. По умолчанию значение равное 0.

10) fs=(1/0) Значения: 0 или 1. Значение по умолчанию: 1. Значение 0 отключает кнопку развернуть видео на весь экран. Значение 1 по умолчанию оставляет кнопку развернуть видео на весь экран.

11) color=(red/white) Значения: red или white. Значение по умолчанию: red. Изменяет цвет нижней панели управления плеером. Значение: white сделает нижнюю панель управления плеера светло-серой. Примечание. Если для параметра color установлено значение white, параметр modestbranding отключается.

12) iv_load_policy=(1/3) [HTML5, AS3] Значения: 1 или 3. Значение по умолчанию: 1. При значении 1 аннотации видео по умолчанию будут отображаться, а при значении равным 3, по умолчанию будут скрыты.  Примечание. Проще говоря, все подсказки (ссылки) в видео будут скрыты.

13) loop=(0/1) [HTML5, AS3] Значения: 0 или 1. Значение по умолчанию: 0. Если значение равно 1, то одиночный проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле. Проигрыватель плейлистов (или пользовательский проигрыватель) воспроизводит по кругу содержимое плейлиста.

14) modestbranding=(1/0) Этот параметр позволяет использовать проигрыватель YouTube, в котором не отображается логотип YouTube. Установите значение 1, чтобы логотип YouTube не отображался на панели управления. Небольшая текстовая метка YouTube будет отображаться в правом верхнем углу при наведении курсора на проигрыватель во время паузы.

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

 

Параметры проигрывателя: //developers.google.com/youtube/player_parameters

Демонстрация YouTube Player API: //developers.google.com/youtube/youtube_player_demo

Разберём как же добавлять эти параметры в код видео.

Все очень просто! Первая команда указывается сразу после ссылки на ваш ролик, после вопросительного знака (?), а все дополнительные — после амперсанда (такого вот значка &).

 

Смотрите на примере моего кода:

https://www.youtube.com/embed/tJRp3f_SNhE?rel=0&enablejsapi=1&color=red&showinfo=0&vq=highres&modestbranding=1&buffering=0&loop=0&autoplay=1&wmode=transparent

 

Смотреть видео:
Всплывающее окно со встроенным YouTube видео с помощью JQuery библиотек FancyBox.

Прямая ссылка просмотреть урок на YouTube

Смотреть DEMO страницу

Скачать исходники: PopUp видео JQuery  одним архивом.

Запасной способ скачивания: https://yadi.sk/d/O-EVQqmq32K4Ad

 

Смотреть видео:
Всплывающее окно со встроенным YouTube видео с помощью CSS стилей.

Прямая ссылка просмотреть урок на YouTube

Смотреть DEMO страницу

Скачать исходники: PopUp видео CSS  одним архивом.

Запасной способ скачивания: https://yadi.sk/d/W-B0dGvs32K4Am

 

Пояснения о том как правильно использовать параметры Ютуб плеера я показал выше!