Не удается загрузить видео с YouTube в Fancybox - пустая страница - PullRequest
Новая
       22

Не удается загрузить видео с YouTube в Fancybox - пустая страница

0 голосов
/ 30 января 2012

Люди,

Я пытаюсь открыть видео на YouTube в fancybox, используя следующий код: 

<script type="text/javascript">// <![CDATA[
    jQuery(document).ready(function(){      
        jQuery("a.video").fancybox({            
                'hideOnContentClick'    : false,
                'width'         : '50%',
                'height'        : '50%',
                'autoScale'     : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'          : 'iframe'
        });
    });
// ]]></script>

iframe fancybox вызывается: 

<a class="video" href="http://www.youtube.com/watch?v=L9szn1QQfas"><img title="sometitle" src="http://pathToImage.png" alt="" width="140" height="103" /></a>

Fancybox всплывает просто отлично. Однако при вызове видео с YouTube отображается пустой белый iframe.

Например, при замене URL YT на http://www.amazon.com страница Amazon загружается очень хорошо. При использовании www.youtube.com (страница индекса YT) или www.google.com снова загружается пустой iframe.

Я искал через google и stackoverflow несколько часов, но не смог найти решение, которое сработало.

Помощь очень ценится.

РЕДАКТИРОВАТЬ 01/01/2012: Sudhir, tanhuong, JFK, спасибо за размещение ваших ответов. Очень ценится.

Я использовал решение JFKs, которое отлично работало. Извините, как новичок здесь на ТАК, я не могу оценить ваши ответы. В противном случае я уверен, что имел.

Ответы [ 4 ]

4 голосов
/ 04 июня 2012

Недавно код для вставки YouTube изменился и выглядит примерно так: http://youtu.be/zH5bJSG0DZk. То, как раньше работал fancybox, выглядело примерно так: 

'href' : this.href.replace(new RegExp("watch\\?v=","i"), 'v/')

Теперь, это не совсем работает с новым URL-адресом для вставки. Потратив несколько часов на поиски решения, я нашел его здесь: http://groups.google.com/group/fancybox/browse_thread/thread/e8f81f420eed7c3c/f12af70aded87c2a

По сути, он переключает вызов fancybox на это: 

 $.fancybox({
                    'padding' : 0,
                    'type' : 'iframe',
                    'href' : this.href.replace(new RegExp('youtu.be', 'i'), 'www.youtube.com/embed').replace(new RegExp('watch\\?v=([a-z0-9\_\-]+)(&|\\?)?(.*)', 'i'), 'embed/$1?version=3&$3')
 });

Я протестировал его с текущим кодом встраивания и старым кодом встраивания, и, похоже, он работает с обоими.

0 голосов
/ 30 января 2012

код Судхира близок, но не сработает; правильный код для использования в этом сценарии: 

$(".video").click(function() {
 $.fancybox({
  'hideOnContentClick': false,
  'autoScale': false,
  'transitionIn': 'none',
  'transitionOut': 'none',
  'title': this.title, // optional
  'width': 680, // or your size
  'height': 495,
  'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
  'type': 'swf',
  'swf': {
    'wmode': 'transparent',
    'allowfullscreen': 'true'
  }
 }); // fancybox
 return false;
}); // click

С другой стороны, если вы хотите открыть внешние веб-сайты, право type равно iframe, однако имейте в виду, что вы не сможете открыть google или yahoo и некоторые другие конкретные сайты внутри fancybox (они не хотели бы, чтобы их содержали в iframes из-за некоторых правил в отношении рекламы, проверьте это, чтобы узнать больше ) ... хотя вы можете открыть свой собственный веб-сайт или внешние веб-страницы.

0 голосов
/ 01 февраля 2012

мое решение: добавьте 'type': 'iframe' при вызове функции fancybox (). Как это: $ ( "A # IFrame-посадка"). FancyBox ({ 'type': 'iframe' });

и это работает. Надеюсь, это поможет.

0 голосов
/ 30 января 2012

Попробуйте: 


$("a.video").fancybox({
            'titleShow'     : false,
            'hideOnContentClick'    : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'      : 'swf',
            'swf'       : {'wmode':'transparent','allowfullscreen':'true'}
        });

Надеюсь, это поможет

...