
Данный скрипт в автоматическом режиме превратит все найденные youtube ролики в лайтбокс, а это значит, что при клике по ролику его копия будет воспроизведена в lightbox окне
Механизм работы скрипта прост. Так как у роликов с youtube офигенно большой z-index, то сначала мы нехитрой манипуляцией с адресом ролика дописываем параметр wmode=opaque, после чего накладываем прозрачный оверлей, параллельно перезаписывая ссылку в блоке с готовым фреймом. При клике по оверлею вызываем лайтбокс окно. Более подробное описание никчему
Установка:
В любое место на нужных страницах:
Code
<div id="videocontent" style="display:none;"><iframe width="640" height="360" src="" frameborder="0" allowfullscreen></iframe></div>
<script type="text/javascript">
var apohtml; // Переменная для проверки ссылки в лайтбокс блоке
$(document).ready(function() {
// Проверка, ролик ли это ютюба + подмена ссылок и наложение оверлея
$('* iframe').each(function() {
if($(this).attr('src').indexOf('/embed/') != -1) {
var aposplit = $(this).attr('src').split('?feature')[0]
$(this).attr('src', aposplit + '?wmode=opaque');
$(this).before('<div class="apovideo" style="background:transparent;position:absolute;width:' + $(this).attr('width') + 'px;height:' + $(this).attr('height') + ';z-index:2;" onclick="$(this).children().hide();videoLightbox();return false;" />');
}
});
// При наведении на оверлей над роликами
$('div.apovideo').hover(function() {
if($(this).next().attr('src') != apohtml) {
$('#videocontent').find('iframe').attr('src', $(this).next().attr('src'));
apohtml = $('#videocontent').find('iframe').attr('src');
};
});
// Очищаем содержимое лайтбокс блока при закрытии
$('#fancybox-overlay, .fancybox-close').click(function(){
$('div#videocontent').empty();
})
});
</script>
<script type="text/javascript">
var apohtml; // Переменная для проверки ссылки в лайтбокс блоке
$(document).ready(function() {
// Проверка, ролик ли это ютюба + подмена ссылок и наложение оверлея
$('* iframe').each(function() {
if($(this).attr('src').indexOf('/embed/') != -1) {
var aposplit = $(this).attr('src').split('?feature')[0]
$(this).attr('src', aposplit + '?wmode=opaque');
$(this).before('<div class="apovideo" style="background:transparent;position:absolute;width:' + $(this).attr('width') + 'px;height:' + $(this).attr('height') + ';z-index:2;" onclick="$(this).children().hide();videoLightbox();return false;" />');
}
});
// При наведении на оверлей над роликами
$('div.apovideo').hover(function() {
if($(this).next().attr('src') != apohtml) {
$('#videocontent').find('iframe').attr('src', $(this).next().attr('src'));
apohtml = $('#videocontent').find('iframe').attr('src');
};
});
// Очищаем содержимое лайтбокс блока при закрытии
$('#fancybox-overlay, .fancybox-close').click(function(){
$('div#videocontent').empty();
})
});
</script>
Готово.
Просмотров: 1819
|
Категория: Другие скрипты для ucoz | Добавил: NA
Другие новости |
Поделиться ссылкой
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.