Fancybox is displaying a blank page with IE7

Question

I'm trying to load a YouTube video with Fancybox. It's working with all the browsers but it seems to have problem with IE7, it only shows a blank white page. I don't know what I've done wrong here, I tested there example online and it work with IE7, http://fancybox.net/blog. I also took my code from them.

So here's my markup on the homepage (where the video is located):

<a href="http://www.youtube.com/watch?v=sqC3tk_-e7g" title="The Problem" id="homevideo1">
    <span class="playButton"></span>
    <img width="170" src="/images/all/video-image1.jpg" alt="" />
    <div class="videoTitle">The Problem</div>
</a>

and, this is my script for the video:

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

It might be something to do with CSS, I'm not too sure... But I haven't touch the .css that comes with the plug-in at all

Any ideas?

Thanks.

Answer 1

You need to put your jquery click event in document ready, like this

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

Try it live here (jsfiddle)

Answer 2

Synotte,

I too had problems with IE7 (not YouTube, but video embedding).

Removing the padding from the map worked for me, for some reason it was reducing the width of the video to zero.

May not be your issue, but worth a try.

Adam