Скрипт YouTube и другой контент в модальном окне

Скрипты 1156 Гость 24.04.2024 0.0

Модальное окно для вывода видео с YouTube и другой контент. Использует только jQuery, HTML и CSS. Сам крестик сделан на CSS. Если любите простоту то окошко должно Вам приглянуться.

Модальное окно предназначено не только для видео:

Скрипт YouTube и другой контент в модальном окне


Установка скрипта
1) Вставляем в стили:
.pop-up {
 width: 500px;
 box-shadow: 0 0 0 1000px rgba(0,0,0,0.5);
 background: rgba(0,0,0,0.5);
 position: fixed;
 top: 50%;
 margin-top: 100%;
 left: 50%;
 margin-left: -250px;
 z-index: 9;
 color: #fff;
 display: none;
}

.popup-close {
 width: 50px;
 margin-right: -60px;
 opacity: 0.8;
 float: right; 
 cursor: pointer;
}

.popup-l1, .popup-l2 {
 width: 6px;
 height: 50px;
 margin-top: -5px;
 margin-left: 22px;
 background: #fff;
}

.popup-l1 {
 float: left;
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
}

.popup-l2 {
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

.popup-close:hover {
 opacity: 1;
}


2) На страницу добавляем следующий код:
<script>
function open_popup(box, width, height, yt) {
 if(!$(box+' iframe').length && yt) {
 $(box).append('<iframe id="yt" width="'+width+'" height="'+height+'" src="//www.youtube.com/embed/'+yt+'?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>');
 }
 $(box+' .popup-close').html('<div class="popup-l1"></div><div class="popup-l2"></div>');
 if(width) $(box).css({'width': width, 'margin-left': -(width/2)});
 if(height) $(box).css({'height': height, 'margin-top': -(height/2)});
 else $(box).css('margin-top', -($(box).height()/2));
 $(box).show();
}
function close_popup(box) {
 $(box).hide();
 $(box+' #yt').remove();
}
</script>

(Для работы скрипта требуется jQuery)

Использование:
Для открытия окна используется функция open_popup(). Эта функция принимает 4 параметра (можно указать только один): идентификатор блока, ширина блока, высота блока, идентификатор видео YouTube

Пример использования модального окна с HTML кодом:
<div id="box-1" class="pop-up">
 <div class="popup-close" onclick="close_popup('#box-1')"></div>
 HTML код
</div>
<a href="#" onclick="open_popup('#box-1')">Открыть</a>



Пример использования модального окна с YouTube видео:
<a href="#" onclick="open_popup('#box-2', 640, 360, 'IuQf4t0QWnE')">Смотреть</a>

<div id="box-2" class="pop-up"><div class="popup-close" onclick="close_popup('#box-2')"></div></div>
Категория: Скрипты

Cкриншоты:
Скрипт YouTube и другой контент в модальном окне
Скачать .torrent, файл ()
Торрент:
Зарегистрирован
Статус:
V Проверено
.torrent, файл скачан:
0 раз
Размер:
Всего комментариев: 2
2 | ASYLBEK_KZRAP пишет: | 28.02.2015 | 17:29 Спам Страница с комментарием |
Решил проблему!
1 | ASYLBEK_KZRAP пишет: | 28.02.2015 | 12:18 ( E-mail ) Спам Страница с комментарием |
Здравствуйте! Я добавил ваш код на свой сайт, добавил один трейлер видео через доп. поля, а этот трейлер показывает во всех кнопках из любого фильма, если добавить другие трейлеры то они не показывают. Как сделать так чтобы трейлеры добавились отдельно к фильму?!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Ресурс Soft-pk.do.am 2022 не содержит никакой нелегальной информации, также данный ресурс не является распространителем ПО и всех имеющихся файлов, данный файлы предоставлены для ознакомления и должны быть удалены пользователями после скачивания после ознакомительного периода

Любой торрент, файл будет удален по требованию правообладателя. Бесплатный конструктор сайтов - uCoz