Невозможно вставить видео YouTube с FancyBox - PullRequest
Новая
       28

Невозможно вставить видео YouTube с FancyBox

3 голосов
/ 19 марта 2012

Итак, я пытаюсь вставить видео с YouTube во всплывающее окно Fancybox.Однако он не загружается, появляется только пустое всплывающее окно.

Я применил класс .fancyYoutube к ссылке и связал ссылку на мою страницу с jquery.

Iзапустите демонстрационный сайт для тестирования, который вы можете найти здесь: http://stevepolitodesign.comlu.com/

Часть, которая не работает, находится в разделе «портфолио» и находится внизу слева.

Вот HTML-код для затронутого кода: 

<div class="myWork">
 <a href="http://youtu.be/aXC4BORr3jI" class="fancyYoutube">
 <p class="caption">
 <span class="bold">category:</span> <br />
 motion graphics <br /><br />
 <span class="bold">client:</span> <br />
 camp harrington<br />
 </p>
 <img src="images/thumbnails_16.jpg" width="130" height="130" alt="Camp Harrington   Promotional Video"  class="thumbnail"/>
 </a>
</div>

Вот уязвимый jquery: 

$("a.fancyYoutube").fancybox({
'transitionIn' : 'elastic',
'padding' : 0,
'autoScale' : false,
'transitionOut' : 'fade',
'width' : 680,
'height' : 495,
'type' : 'swf'
});

Ответы [ 3 ]

3 голосов
/ 20 марта 2012

на самом деле html на вашем сайте - 

<a href="http://www.youtube.com/watch?v=aXC4BORr3jI&amp;feature=channel_video_title" class="fancyYoutube">

, если вы хотите продолжать использовать html, попробуйте этот скрипт: 

$("a.fancyYoutube").click(function() {
    $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

    return false;
});

Обратите внимание, что скрипт будетработать только для текущих html и fancybox v1.3.4.Если вы измените html (или версию fancybox), вам может понадобиться настроить скрипт

2 голосов
/ 20 марта 2012

http://youtu.be/aXC4BORr3jI перенаправляет на http://www.youtube.com/watch?v=aXC4BORr3jI&feature=youtu.be.

Эта страница содержит заголовок ответа X-Frame-Options:SAMEORIGIN, что предотвращает загрузку страницы во фрейме в другом домене.

Используйте URL /embed/ для включения видео в кадр: http://www.youtube.com/embed/aXC4BORr3jI
Дополнительным преимуществом является то, что отображается только видео, без комментариев, связанных видео и т. Д.

0 голосов
/ 12 марта 2013

Я изменил 'type' : 'swf' на 'type' : 'iframe', и он начал работать.Конечно, вместе с подсказками "/ embed /".

Это логично, поскольку http://www.youtube.com/embed/... URL возвращает HTML-код, а не сам SWF-контент.

...