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

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

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

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

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

 

Ради примера, я использую кнопки для вызова видео в модальном окне, вы же можете использовать то, что вам больше по душе (как и писал выше): картинки, или простые ссылки. Видео можно использовать с любимого сервиса 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

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