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

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

6 983

картинка

Продолжая тему "модальные окна" решил выложить замечательный скрипт для отображения видео в модальном окне.

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

 

Ради примера, я использую кнопки для вызова видео в модальном окне, вы же можете использовать то, что вам больше по душе (как и писал выше): картинки, или простые ссылки. Видео можно использовать с любимого сервиса Youtub.com, а так же и свои в различных форматах.

Примеры видео в модальном окне


Добавлять видео на страницу можно неограниченное количество. И здесь используются: один стилевой файл и два скрипта.

Размеры модального окна можно отрегулировать в скрипте в самом низу страницы.
Откройте из скачанного архива (ссылка внизу) index.html и вам будет ясно, где делать изменения.

Код для Java
       ---- На полный экран ----
$('a.lightbox').divbox({caption: false});
     ---- Фиксированый размер ----
$('a.lightbox2').divbox({width:600, height:400, caption: false});

Вот в этом коде вы и прописываете значения по высоте и ширине для своего модального окна.

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

Код для html
<a class="lightbox" href="http://youtube.com/ваше_видео">Смотреть видео</a>
    ======  ЛИБО  =====
<a class="lightbox" href="http://ваш_сайт.ru/видео.mp4">Открыть видео</a>

И абсолютно таким же макаром используется и фото в модальном окне. Только вместо ссылки на видео указываете путь до большой картинки, а вместо теста Смотреть видео, как в моём случае, прописываете код для отображения картинки в уменьшенном виде. И у вас таким образом получится красивое фото в модальном окне.

Понравился скрипт - нажимаем на ЛАЙКИ. Что не понятно, - спрашиваем.

Скачать скрипт видео в модальном окне

Ссылка на файл: video_modal.zip 327

Похожие новости

Юрий
  • 0
User: ЮрокСпасибо за статью, все отлично работает, вот только не могли-бы вы выложить для скачивания еще и CSS файл с настройками для модального окна, а то видео открывается в модальном окне без всего (рамки, затемнения фона).
  • 25 февраля 2015 13:06
Админ
  • 0
User: бос→ Юрий
Да, вижу. В коде прописал путь для стилевого файла divbox.css, а в архив его не закинул. И картинок тоже там нет.
Попозже исправлю, скорее всего завтра всё будет в комплекте.
  • 25 февраля 2015 20:08
Жоря
  • 0
User: ЖоряНе работает этот скрипт для видео в модальном окне на сайте под движком ДЛЕ...
  • 14 июня 2016 17:29
Админ
  • 1
User: отдел продаж→ Жоря
Здесь ответ простой - нужно просто дружить с головой, потому как если нет понятий, то нужно спрашивать причину (как это делает большинство), а не делать сразу свои утверждения.
Я перевёл свой сайт именно на движок DLE и как видите всё работает!
  • 14 июня 2016 19:53
Доран
  • 0
User: ДоранДобрый день.
Как можно добавить в описанный пример кнопки для перелистывания изображений в модальном окне и прописать, допустим, несколько изображений?
  • 26 февраля 2017 05:46
Админ
  • 0
User: Admin→ Доран
Если мне память не изменяет, то в скрипте видео в модальном окне изначально был внедрён код для перелистывания элементов.
Но я точно не помню, поковыряйтесь сами и поищите в скрипте "prev", "next" или что-то подобное.
А вообще, для этих целей есть уже готовое решение: фотогалерея в модальном окне
  • 26 февраля 2017 14:48