[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Превращение всех видео Youtube на странице в uLightbox
offtop
Дата: Воскресенье, 19.05.2013, 08:27 | Сообщение # 1
Оффлайн
Пользователи
Сообщений: 216
IP: Скрытная информация


Данный скрипт в автоматическом режиме превратит все найденные 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>
Прикрепления: 2252897.png (475.2 Kb)
  • Страница 1 из 1
  • 1
Поиск: