Несколько способов сделать всплывающее окно со встроенным 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
Пояснения о том как правильно использовать параметры Ютуб плеера я показал выше!
Жми на социальные кнопки поделись с друзьями:
12 комментариев на «Всплывающее окно со встроенным YouTube видео»
Добавить комментарий
Александр Новиков,
автор этого блога.
Спасибо. Очень полезный материал.
Пожалуйста!
Классная полезная тема! Спасибо Александр. Я побежал на свой блог применять))))
Будет классно, я уверен.
Александр, привет! Очень полезная штука! Мне часто подписчики пишут, что на блоге видеоуроки порой смотреть не комфортно, из-за ширины статьи всего в 600 px особенно не разгуляешься, а переводить их на ютуб — это значит добровольно увести со своего блога (а потом попробуй их обратно вернуть с youtube), тоже не лучший вариант, а тут прямо готовое решение! Обязательно буду использовать в своей работе! Спасибо!
Терять посетителя не лучшее решение. Моё решение не универсальное, есть неудобство работы, но самое главное результат на лицо.
Добрый день, Александр! Простите, я задам вопрос не по теме. Вы живете в Крыму? Вроде вы как-то говорили об этом. Дело в том, что партнеру из Крыма необходимо пополнить баланс в биткоинах, не знает как это сделать. А я не знаю к кому обратиться. Может подскажете? Буду премного благодарна!
Тут я вам не помощник. Я не пользуюсь такой валютой простите. Посмотрите в поиске я уверен найдете много вариантов. У нас давно нет проблем ни с какими платежными системами, всё давно восстановлено и работает. Пополняете удобным способом, а потом через онлайн обменники меняете на нужную вам.
Здравствуйте. Вот вы вундеркинд! Для вас компьютер семечка. Надо же. Я честно сказать очень завидую таким умным, но белой завистью. Спасибо Вам. Благодарю Вас за старания помочь людям. Но я пока не могу ничего зарабатывать, но очень, очень хочется самой работать и самой зарабатывать в интернете.мой паспорт закончился и сейчас буду ждать новый.а до этого и вернее как уже 4 месяца не могу открыть никакой аккаунт, без паспорта нельзя. Но Дай Бог надеюсь до конца этого месяца получить новый паспорт.вот тогда мне нужна будет очень ваша помощь, потому что я в интернете ни бум-бум, как попанов в фильме бриллиантовая рука говорит'лох' это про меня.бабагуля.
Александр, спасибо.
Обязательно установлю на свой сайт.
Здравствуйте, Александр!
Странно, но наблюдаю на своём сайте такую проблему с плагином YouTube FancyBox.
После его активации исчезают все рекламные блоки установленные через виджеты в сайд баре, выключаю его всё становится на свои места.
Не сталкивались с таким?
Конфликт плагинов. Нужно искать альтернативу или рекламе или данному плагину;