Главная » Файлы » Скрипты для uCoz » Другие скрипты

Превращение всех видео youtube на странице в lightbox by Apocalypse для uCoz
24.06.14, 14:18:14




Данный скрипт в автоматическом режиме превратит все найденные 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>


Материал разработан и подготовлен Apocalypse

Категория: Другие скрипты | Добавил: Apocalypse | Теги: видео, Apocalypse, Lightbox, всех, by, на, Youtube, странице, Превращение, для
Просмотров: 573 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 5.0/1
Всего комментариев: 2
0
А как его переделать для форума?

Имя *:
Email: