Question

For some reason I can’t get absolutely position elements with a z-index set to 9999 to appear over my FancyBox with YouTube iframe, even though I have my wmode parameter set to opaque, even the ‘X’ close button:

FancyBox v2.1.3

FancyBox Media v1.0.5

JS:

(function($) {
    $(function() {

        $('#splash-video')
            .fancybox({
                fitToView : true,
                width     : '100%',
                height    : '100%',
                margin    : 10,
                padding   : 0,
                helpers   : {
                    media : true
                },
                youtube : {
                    params : {
                        autoplay : 1,
                        fs       : 1,
                        hd       : 1,
                        rel      : 0,
                        showinfo : 0,
                        wmode    : 'opaque' // this no worky
                    }
                }
            });

        $('.skip-video').on('click', function() {
            $.fancybox.close();
            $(this).remove();
        });

        setTimeout(function() {
            $.fancybox.close();
            $('.skip-video').remove();
        }, 64000);
    });
})(jQuery);

HTML:

<a id="splash-video" href="http://www.youtube.com/watch?v=dQw4w9WgXcQ"></a>
<a href="#" class="skip-video">Skip Video</a>

The above activates my FancyBox which is then click-triggered to appear, while having my .skip-video anchor position over the top, but it doesn’t.

Both transparent and opaque seem to have no effect on any browser; the “X” close button and div are above the YouTube video in Chrome, but literally no other major browser (FF, IE7-9, Opera and Safari).

All in all, I think none of the YouTube params are working.

UPDATE:

It’s working now thanks to Janis‘ help :).
I altered my Fancybox JS to:

$('#splash-video')
    .fancybox({
        fitToView : true,
        width     : '100%',
        height    : '100%',
        margin    : 0,
        padding   : 0
    });

and changed the anchor to:

<a id="splash-video" class="fancybox.iframe" href="http://www.youtube.com/embed/opj24KnzrWo?autoplay=1&amp;autohide=1&amp;fs=1&amp;rel=0&amp;hd=1&amp;wmode=opaque&amp;enablejsapi=1"></a>

Great success!

Answer 1

1. Why do you think that none of the params are working? Is your video auto-starting? If you check developer tools, does the iframe source looks like this?
   http://www.youtube.com/embed/opj24KnzrWo?autoplay=1&autohide=1&fs=1&rel=0&hd=1&wmode=opaque&enablejsapi=1
   If yes, then the script works perfectly fine.

2. I do not know how exactly are you trying to get absolutely position elements to appear over the fancyBox and why it is not working for you, but this works fine for me:

   $(".fancybox")
   .attr('rel', 'gallery')
   .fancybox({
       openEffect  : 'none',
       closeEffect : 'none',
       nextEffect  : 'none',
       prevEffect  : 'none'
   });​
   

   Test case.