iframe not loading

This only occurs in Safari.

www.dalworthrestoration.com

• Notice the featured content jQuery carousel

• The content auto cycles forward and when it gets to #3, the Welcome to Da开发者_运维知识库lworth video, it displays properly.

But here is the issue:

• If you allow it to cycle forward to the 4th thumbnail and then click back to #3, the Welcome to Dalworth video, the iframe is mispositioned, it only shows one third of the image.

• If you scroll however, the video suddenly pops properly in to place.

I'm completely stumped.

Edit: Completely new answer.

This trick worked for me, using Safari's debugger. Resize the iframe to 0x0 before you hide the parent li. Then immediately resize it after you've hidden the li. This is from your setSlider() function:

list.find("iframe").attr({ height: 0, width: 0 });
list.filter(':visible').hide().end().eq(index).fadeIn();
list.find("iframe").attr({ height: 340, width: 560 });

Edit: I got this working in v5.0.5. If you saw my original answer, it's basically that. Replace your click handler with this one, which scrolls by 1px and back after the transition:

btn.click(function(){
    index=jQuery(this).index();
    list.filter(':visible').hide().end().eq(index).fadeIn();
    scrollTo(document.body.scrollLeft, document.body.scrollTop+1);
    scrollTo(document.body.scrollLeft, document.body.scrollTop-1);
    btn.removeClass('fc_current');
    btn.eq(index).addClass('fc_current');
    clearTimeout(timer);timer=undefined;setSlider();
});

You see a quick flash right at the transition, but it's not very noticeable.

It's a rendering issue in Safari. It's not something that you could particularly fix, short of a hackish function to upon tab change make the page scroll down and instantly back to where it was.

It does, however, work if they have enabled HTML 5 video instead: http://www.youtube.com/html5