Search code examples
jqueryfancyboxjwplayerfancybox-2

Fancybox overlay issue on ipad/iphone

On ipad / iphone, the overlay appears over the top of media in fancybox, that is the whole page is filled with the overlay incuding the content of fancybox. Any ideas how I can fix this?

Also, I have jwplayer working in fancybox playing videos using html5, instead of Flash, but the problem is the overlay appearing on top of the video, so that when I touch the play button, fancybox goes away...

See my previous question on my implementation of jwplayer in fancybox for ios at jwplayer in fancybox not playing on ipad/iphone

EDIT:

Interestingly, if I comment out this block of css, I can click on the fancybox video on an ipad without it going away and play the video:

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 9999;
background: url('fancybox_overlay.png');
}

Whilst fancybox then works OK on iPhone and iPad, the display of fancybox of desktop devices is less than desirable...

Solution

  • If I change the css in jquery.fancybox.css to the following, all is fine on desktop and ios devices:

    .fancybox-overlay {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
/*    z-index: 9999;*/
background: url('fancybox_overlay.png');
}