Данный скрипт в автоматическом режиме превратит все найденные youtube ролики в лайтбокс, а это значит, что при клике по ролику его копия будет воспроизведена в lightbox окне
Механизм работы скрипта прост. Так как у роликов с youtube офигенно большой z-index, то сначала мы нехитрой манипуляцией с адресом ролика дописываем параметр wmode=opaque, после чего накладываем прозрачный оверлей, параллельно перезаписывая ссылку в блоке с готовым фреймом. При клике по оверлею вызываем лайтбокс окно. Более подробное описание никчему
Установка:
В любое место на нужных страницах:
Код
<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>