iframe overlapping Jquery fancybox

Question

I am displaying image pop-up using Jquery fancybox and in the webpage there is an VIMEO video embedded using iframe. The image get display correctly in most of the browser but when I test in iPhone 4 and Samsung Galaxy S2, the video overlays the pop-up image.

I tried with "wmode=transperant".

I search a lot in google but no proper answer. Please help.

Perhaps this might help: [LINK](http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements) — Turnip, Jul 12 '12 at 12:32

score 0 · Answer 1 · answered Jul 12 '12 at 15:39

I tried experimenting many things but no solution. Then I solve my problem with other methods i.e, Jquery Fancybox "onStart" and "onClose". Here is my solution...

$(document).ready(function() {

$("#elementToBePopup").fancybox({

        'autoDimensions':true,
        'scrolling': 'no',
        'onStart':
            function(){
                $("#vimeo-video").css('display', 'none');
            },
        'onClosed' : 
            function() {
                $("#vimeo-video").css('display', 'block');
            }
    }).trigger('click');
});

where "elementToBePopup" is the element to be pop-up and "vimeo-video" is the ID of video which is overlapping the pop-up.

Hope it help others.

iframe overlapping Jquery fancybox

1 Answers1