Вбудовуємо відео в модальний

64

Всім доброго дня чи ночі!

Раніше ми докладно розглянули спосіб створення чудового модального вікна за допомогою 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», що з допомогою магії jQuery виведе вікно потрібного нам розміру.
На відео ви можете додати заголовок і короткий опис, а так само різні кнопари для соціальних мереж, типу «Мені подобається», «Клас», «Твітнуть» і ще багато різної лабуди.

Демо

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

На жаль не обійшлося і без деяких косяків. Виявляється вбудоване відео, при закритті вікна, з якогось переляку продовжує програватися. На сьогоднішній день у мене вимальовується лише одне рішення цієї проблеми, точніше, я б сказав — своєрідний милицю, у вигляді примусового перезавантаження сторінки, при натисканні кнопки «закрити» на модальному вікні. Рішення не найкраще, втрачається привабливість використання модального вікна. Тим хто все ж таки вирішить використовувати модальне вікно, для відтворення відео, необхідно 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;
});
});

//Закриваємо вікно і шар затемнення
$(document).on(‘click’, ‘a.close #fade’, function() { //закриття по кліку поза вікна і кнопки закриття…
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove(); //При натисканні закривається вікно і відео зупиняється
document.location.reload();
});
return false;
});
});

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

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

З Повагою, Андрій .

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