Главная » Уроки » Встраиваем видео в модальное окно

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

Всем, доброго дня ли ночи!

Ранее мы подробнейшим образом рассмотрели способ создания замечательного модального окна с помощью CSS и jQuery.  Научились расширять, по мере надобности, функционал нашего всплывающего окошка, используя его для подачи различной информации, будь то динамичный ротатор контента ,  или встроенная форма обратной связи.

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

 

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

 

Как вы уже знаете из предыдущих записей по теме, мы имеем модальное окно в виде блочного элемента div, который через идентификатор id="popup" привязан к ссылке для вызова всплывающего окна, имеющей атрибут rel="popup". Соответственно для вывода последующих окон, не забываете добавлять в атрибут rel, цифровой порядковый номер, типа popup1,2,3 и т.д, и конечно не забываем про идентификатор id, выставляем такой же.
 

<a href="#?w=560" rel="popup" class="poplight">Смотреть Встроенное видео</a>

 

<div id="popup2" class="popup_block">Здесь вставляете сгенерированный код видеоролика....</div>

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

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

Код для вставки видео

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

<div id="popup2" class="popup_block"><iframe width="560" height="315" src="http://www.youtube.com/embed/CgBcloPdJjg" frameborder="0" allowfullscreen></iframe></div>

 
В примере я использовал видео с шириной 560px, соответственно для корректного отображения в модальном окне, ссылке вызова, атрибуту href прописал значение «#?w=560», что с помощью магии выведет окно необходимого нам размера.
К видео вы можете добавить заголовок и краткое описание, а так же различные кнопари для социальных сетей, типа «Мне нравиться», «Класс», «Твитнуть» и еще много разной лабуды.

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

К сожалению не обошлось и без некоторых косяков. Оказывается встроенное видео, при закрытии окна, с какого-то перепуга продолжает проигрываться. На сегодняшний день у меня вырисовывается лишь одно решение этой проблемы, точнее, я бы сказал — своеобразный костыль, в виде принудительной перезагрузки страницы, при нажатии кнопки «закрыть» на модальном окне. Решение не самое лучшее, теряется привлекательность использования модального окна. Тем кто все же решит использовать модальное окно, для воспроизведения видео, необходимо в javascript добавить одну строку: document.location.reload(); и видео будет останавливаться, но при этом будет перезагружаться и страница, что конечно же не есть хорошо.

 

//Закрываем окно и слой затемнения
$(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна и кнопке закрытия...
  $('#fade , .popup_block').fadeOut(function() {
       $('#fade, a.close').remove(); //При нажатии закрывается окно и видео останавливается
   document.location.reload();
   });
    return false;
   });
});

 
Если возникнут вопросы, или вы найдете более подходящее решений остановки видео при закрытии окна, не стесняйтесь, пишите в комментариях. Вместе все у нас получится. Удачи и до новых встреч!

PS: Может кого заинтересует: Модальный блок видео на чистом CSS3

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

25 комментариев
  1. Иван says:

    а как сделать чтобы после закрытия окна вверх не проматывалось?

    Ответить
«12
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru