Can't load YouTube video in Fancybox - blank page

Question

Folks,

I'm trying to open a youtube video in fancybox using the following code:

<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>

The fancybox iframe gets called by:

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

The fancybox pops up just fine. However, when a YouTube video is called, a white blank iframe is displayed.

When replacing the YT URL with http://www.amazon.com for example, the Amazon page gets loaded just fine. When using www.youtube.com (YT index page) or www.google.com, again a blank iframe is loaded.

I've been searching via google and stackoverflow for hours but couldn't find a solution that worked.

Help very much appreciated.

EDIT 02/01/2012: Sudhir, tanhuong, JFK, thanks for posting your answers. Much appreciated.

I used JFKs solution which worked great. Sorry, as a newbie here on SO I can't rate your answers. Otherwise I sure had.

you don't need to rate the answers, just mark which is the correct one for you — JFK, Feb 02 '12 at 06:20

score 4 · Answer 1 · answered Jun 04 '12 at 13:34

Recently youtube embed code changed and it looks something like this: http://youtu.be/zH5bJSG0DZk. The way fancybox was working before looked something like this:

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

Now, that is not really working with the new embed URL. After spending a few hours looking for a solution, I found it here: http://groups.google.com/group/fancybox/browse_thread/thread/e8f81f420eed7c3c/f12af70aded87c2a

Basically, it switches the fancybox call to this:

 $.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')
 });

I tested it with current embed code and old embed code and it seems to be working with both.

Thank you. This link was so helpful: https://groups.google.com/forum/?fromgroups=#!topic/fancybox/6PgfQg7tfDw I finally got my Fancybox to play a Youtube video in IE9 without Flash installed. — Ryan, Sep 21 '12 at 16:48

score 0 · Answer 2 · answered Jan 30 '12 at 05:53

0

Try:


$("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'}
        });

Hope it helps

answered Jan 30 '12 at 05:53

Sudhir Bastakoti

99,167
15
158
162

Sudhir, tanhuong, JFK, thanks for posting your answers. Much appreciated. – josch Feb 01 '12 at 11:55

score 0 · Accepted Answer · edited May 23 '17 at 12:11

Sudhir's code is close but won't work; the right code to use for this scenario is:

$(".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

On the other hand, if you want to open external websites, the right type is iframe, however bear in mind that you won't be able to open google or yahoo and some other specific sites inside of fancybox (they won't like to be contained in iframes due to some ads policies, check this for more )... you may open your own website or external web pages though.

score 0 · Answer 4 · answered Feb 01 '12 at 09:51

0

my solution: add 'type' : 'iframe' when you call fancybox() function. Like this: $("a#iframe-landing").fancybox({ 'type' : 'iframe' });

and it works. Hope it helps.

answered Feb 01 '12 at 09:51

tanhuong

11
1

Can't load YouTube video in Fancybox - blank page

4 Answers4

Linked