javascript - Fancybox not displaying YouTube video since iOS6 - Stack Overflow

admin管理员组

文章数量:1327843

This is the code I have been using for the last year. It works great!

$("#videos a").click(function() {
    if ($(this).hasClass('youtube')) {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : $(this).attr('data-width'),
            'height'        : $(this).attr('data-height'),
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                'wmode'     : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

        return false;
    }
});

When this code was used on the iPad the video would display. If the video wasn't viewable on the iPad you would see a YouTube icon with a crossed out play button.

Since iOS6 this has stopped working. Nothing in the code has changed. Instead you now see a white pop up. Has anyone e across this? Does anyone know the cause?

I am using Fancybox 1.3.4

This is the code I have been using for the last year. It works great!

$("#videos a").click(function() {
    if ($(this).hasClass('youtube')) {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : $(this).attr('data-width'),
            'height'        : $(this).attr('data-height'),
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                'wmode'     : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

        return false;
    }
});

When this code was used on the iPad the video would display. If the video wasn't viewable on the iPad you would see a YouTube icon with a crossed out play button.

Since iOS6 this has stopped working. Nothing in the code has changed. Instead you now see a white pop up. Has anyone e across this? Does anyone know the cause?

I am using Fancybox 1.3.4

• javascript
• youtube
• fancybox

Share Follow asked Nov 13, 2012 at 11:15 user1326244user1326244 41911 gold badge66 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

To make your youtube videos more accessible across different platforms you should stop using the format http://www.youtube./watch?v=3l8MwU0IjMI (which uses a swf player) but use the embed method instead (you can get the right code from youtube selecting the share tab)

So, instead of this :

<a class="fancybox" href="http://www.youtube./watch?v=3l8MwU0IjMI">open youtube video in fancybox</a>

... do this :

<a class="fancybox" href="http://www.youtube./embed/3l8MwU0IjMI?autoplay=1">open youtube video in fancybox</a>

Then modify your fancybox (v1.3.4) script to open the content type to iframe like

$(".fancybox").fancybox({
 "width": 620, // or whatever
 "height": 420,
 "type": "iframe"
});

本文标签： javascriptFancybox not displaying YouTube video since iOS6Stack Overflow