Создание модального окна для YouTube

Для создания модальных окон часто используют сторонние плагины. К преимуществам такого решения относится быстрая интеграция (заявленная создателями) и простота настройки. Однако при этом от разработчика скрыта логика работы окна и недоступны расширенные настройки.

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

Подготовка embed-ссылки видео. Базовая ссылка видео с YouTube выглядит вот так:

https://www.youtube.com/embed/jdqsiFw74Jk

Для управления этим видео при помощи YouTube Data API к адресной строке необходимо добавить следующие параметры:

https://www.youtube.com/embed/jdqsiFw74Jk?version=3&enablejsapi=1

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

2

Модальное окно состоит из трёх блоков:

  1. Блок ссылки, которая вызывает модальное окно.
  2. Слой затемнённого фона, который появляется при открытии модального окна.
  3. Модальное окно, в котором проигрывается видео.
  4. Кнопка “Закрыть”, которая закрывает модальное окно и прекращает воспроизведение видео.

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

Общая структура выглядит следующим образом:

<a href=”#win-modal”>

<a id=”win-modal”>

<div>

 <!— Содержимое модального окна —>

</div>

3

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

<a href=”#modal-windows-name”>

 <img class=»plate-prop__play-button»    src=»images/yellow-play-button.svg» alt=»» />

</a>

Важным моментом при создании ссылки является указание id модального окна, которое будет вызвано. Как будет показано далее, это позволяет вызывать фон затемнения и модальное окно одновременно.

4

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

<a href=«#x» class=«overlay» id=«modal-windows-name«></a>

Название ссылки перехода не имеет значения. Её задача — перезагрузить страницу для снятия активности с фона затемнения.

5

Модальное окно содержит iframe, в котором указана ссылка с параметрами видео из YouTube, например:

<div class=»youtube-popup»>

 <iframe id=»player» width=»560″ height=»315″ src=»https://www.youtube.com/embed/p3Os8GukDwU?version=3&enablejsapi=1″ frameborder=»0″ allowfullscreen></iframe>

 </div>

6

Кнопка “Закрыть” размещается в верхнем правом углу модального окна и кроме закрытия окна должна останавливать воспроизведение видеопотока. Реализована в виде ссылки:

<a class=»close» title=»Закрыть» href=»#close»></a>

7

Следующим шагом является подключение скриптов, необходимых для корректной работы видео в модальном окне. Скрипты подключаются внутри тега <head>. Необходимо скачать последнюю версию скрипта jquery, а также, при помощи интернет-ссылки подключить скрипт YouTube Data API:

<script src=»../js/jquery-3.2.1.min.js»></script>

<script src=»http://www.youtube.com/player_api«></script>

8

После подключения скриптов реализуется блочная модель и позиционирование элементов модального окна:

<a href=»#youtube-link-1″>

 Ссылка на видео в модальном окне

</a>

<!— Фон-ссылка с затемнением для видео —>

<a href=»#x» class=»youtube-overlay» id=»youtube-link-1″></a>

 <!— Блок модального окна —>

<div class=»youtube-popup»>

 <iframe id=»player-1″ width=»560″ height=»315″ src=»https://www.youtube.com/embed/p3Os8GukDwU?version=3&enablejsapi=1″ frameborder=»0″ allowfullscreen></iframe>

 <!— Кнопка закрытия окна и остановки видео —>

 <a class=»youtube-close» title=»Close youtube window» href=»#youtube-close» id=»stop»></a>

</div>

Для этого подключаем файл стилей styles.css, который содержит следующие базовые стили:

/* Базовые стили слоя затемнения и модального окна */

.youtube-overlay {

 top: 0;

 right: 0;

 bottom: 0;

 left: 0;

 z-index: 10;

 display: none;

 background-color: rgba(0, 0, 0, 0.5);

 position: fixed;

 cursor: default;

}

 

/* Стили модального окна */

.youtube-popup {

 top: -100%;

 right: 0;

 left: 50%;

 font-size: 14px;

 z-index: 20;

 margin: 0;

 width: 85%;

 min-width: 320px;

 max-width: 600px;

 position: fixed;

 

/* Кнопка закрытия модального окна*/

.youtube-close {

 top: -10px;

 right: -10px;

 width: 20px;

 height: 20px;

 position: absolute;

 padding: 0;

 border: 2px solid #ccc;

 -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

     -ms-border-radius: 15px;

      -o-border-radius: 15px;

         border-radius: 15px;

 /*background-color: rgba(61, 61, 61, 1);*/

 background-color: black;

 -webkit-box-shadow: 0px 0px 10px #000;

    -moz-box-shadow: 0px 0px 10px #000;

         box-shadow: 0px 0px 10px #000;

 text-align: center;

 text-decoration: none;

 font: 13px/16px ‘Tahoma’, Arial, sans-serif;

 font-weight: bold;

 -webkit-transition: all ease .3s;

    -moz-transition: all ease .3s;

     -ms-transition: all ease .3s;

      -o-transition: all ease .3s;

         transition: all ease .3s;

 opacity: 1;

 text-decoration: none;

}

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

Фон затемнения youtube-overlay размещается по всей площади видимой области браузера и не смещается при прокручивании страницы:

position: fixed;

Также в неактивном состоянии слой невидим:

display: none;

Модальное окно .youtube-popup изначально размещается за областью видимости экрана вверху и позиционируется по центру экрана:

position: fixed;

top: -100%;

right: 0;

left: 50%;

Остальные свойства задают внешний вид и размеры данных элементов.

9

Поведение элементов модального окна описывается следующими стилями:

  • активация слоя затемнения при нажатии на ссылку:

.overlay:target {
 display: block;
}

  • плавное перемещение модального окна из области -100% в область 20% при нажатии на ссылку.

.overlay:target+.popup {
 -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
         transform: translate(-50%, 0);
 top: 20%;
}

10

Этот минимальный набор стилей позволяет вывести модальное окно с видео-содержимым. При нажатии на кнопку “Закрыть” или щелчке на фоне затемнения, модальное окно закрывается. Но если при этом воспроизводился видео-поток, то он будет продолжать выводить звук. Ведь модальное окно всего лишь переместилось в невидимую область экрана, наверх.

Чтобы устранить эту проблему, используется следующий способ. Кнопке “Закрыть” присваивается уникальный id:

<a href=»#close» id=»stop» title=»Закрыть» class=»close»></a>

В теге <head> записывается скрипт, который при щелчке по кнопке с указанным id, вызывает событие, останавливающее воспроизведение в плеере:

<script>

 var player;

 function onYouTubePlayerAPIReady() {

   player = new YT.Player(‘player-1’);

 }

 $(‘#stop‘).click(function(){

    player.stopVideo()

  })

  </script>

P.S.

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

Пока что данный метод можно рекомендовать для применения в страницах с одним модальным видео-окном. В остальных случаях необходимо использовать плагины, например “FancyBox”.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.