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

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

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

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

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

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

Всплывающее окно со встроенным видео с YouTube для 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.

Всплывающее окно FancyBox работающее на JQuery FancyBox для сайта на HTML

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

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

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

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

 

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

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

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

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

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

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

 

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

 

Жми на социальные кнопки поделись с друзьями:

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Яндекс

10 комментариев на «Всплывающее окно со встроенным YouTube видео»

  • Анатолий говорит:

    Спасибо. Очень полезный материал.

    Ответить
  • Бакенов Наиль говорит:

    Классная полезная тема! Спасибо Александр. Я побежал на свой блог применять))))

    Ответить
  • Дмитрий говорит:

    Александр, привет! Очень полезная штука! Мне часто подписчики пишут, что на блоге видеоуроки порой смотреть не комфортно, из-за ширины статьи всего в 600 px особенно не разгуляешься, а переводить их на ютуб — это значит добровольно увести со своего блога (а потом попробуй их обратно вернуть с youtube), тоже не лучший вариант, а тут прямо готовое решение! Обязательно буду использовать в своей работе! Спасибо!

    Ответить
    • Александр Новиков говорит:

      Терять посетителя не лучшее решение. Моё решение не универсальное, есть неудобство работы, но самое главное результат на лицо.

      Ответить
  • Наталья говорит:

    Добрый день, Александр! Простите, я задам вопрос не по теме. Вы живете в Крыму? Вроде вы как-то говорили об этом. Дело в том, что партнеру из Крыма необходимо пополнить баланс в биткоинах, не знает как это сделать. А я не знаю к кому обратиться. Может подскажете? Буду премного благодарна!

    Ответить
    • Александр Новиков говорит:

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

      Ответить
  • гуля говорит:

    Здравствуйте. Вот вы вундеркинд! Для вас компьютер семечка. Надо же. Я честно сказать очень завидую таким умным, но белой завистью. Спасибо Вам. Благодарю Вас за старания помочь людям. Но я пока не могу ничего зарабатывать, но очень, очень хочется самой работать и самой зарабатывать в интернете.мой паспорт закончился и сейчас буду ждать новый.а до этого и вернее как уже 4 месяца не могу открыть никакой аккаунт, без паспорта нельзя. Но Дай Бог надеюсь до конца этого месяца получить новый паспорт.вот тогда мне нужна будет очень ваша помощь, потому что я в интернете ни бум-бум, как попанов в фильме бриллиантовая рука говорит'лох' это про меня.бабагуля.

    Ответить
  • Vedeney говорит:

    Александр, спасибо.

    Обязательно установлю на свой сайт.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чек-Лист по YouTube

Подпишись на канал Александра

 

 


Александр Новиков,
автор этого блога.
Автор этого блога Александр Новиков  AleksNovikov.Ru

Введите email подпишись:

Каталог виджетов для Adobe Muse

Подписка на Telegram канал