Превращение всех видео Youtube на странице в uLightbox

5095
9 из 10
Проголосовало: 8






Данный скрипт в автоматическом режиме превратит все найденные 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>
Автор публикации: Загрузка
Загрузка
alex0005, это его n материал
Источник: http://www.apo-ucoz.com
  • Всего комментариев: 5

Вовчик
0
Вовчик написал: Написано 29 Января 2016 в 11:35
Комментарий №5
нашел одну ошибку в коде, но почему скрипт не работает не пойму, ошибка вот тут:

Цитата
$(this).before('<div class="apovideo" style="background:transparent;position:absolute;width:' + $(this).attr('width') + 'px;height:' + $(this).attr('height') + 'px;z-index:2;" onclick="$(this).children().hide();videoLightbox();return false;" />');


px не дописан

barocha69
0
barocha69 написал: Написано 31 мая 2015 в 21:13
Комментарий №4
И у меня не работает, игрался с местом, размерами....

onFire
0
onFire написал: Написано 04 мая 2013 в 13:55
Комментарий №3
Не работает,ставил и в <head> и перед видео и после </body> sad

MonaX
0
MonaX написал: Написано 29 Ноября 2012 в 01:37
Комментарий №1
спасибо.

Ромашка:D
0
Ромашка:D написал: Написано 29 Ноября 2012 в 18:08
Комментарий №2
Не за что!

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: