jQuery oembed plugin z-index problem

Question

I'm using the jQuery oembed plugin to display videos from a Vimeo feed.

The only problem is they display over the top of my navigation menu. I have tried setting the z-index of the menu but this makes no difference.

A common suggestion seems to be to set the wmode parameter to transparent or opaque. However, passing this as a parameter to the oembed function makes no difference.

Thanks

Answer 1

I'm having the same trouble, if you've found a fix, please share! thanks

Answer 2

You can use your own callback function to process the returned code, so it is possible to modify it before inserting it.

This is something a little ugly that works but I hope someone can improve:

$(".oembed").oembed(null, null, function(container, oembed) {
        if (oembed == null)
            return; 
        if (oembed.type == "video" && oembed.code != null) {
            if (oembed.code.indexOf("wmode") < 0) {
                oembed.code = oembed.code.replace("<embed ", "<param name=\"wmode\" value=\"transparent\"></param>\n<embed ");
                oembed.code = oembed.code.replace("<embed ", "<embed wmode=\"transparent\"");                                        
            }
        }
        $.fn.oembed.insertCode(container, "replace", oembed);
    });

Regards,

Richard.

Answer 3

I had the same issue and this is my solution:

    var fixZindex = function(){

        $(".oembed").css('z-index','1').css('position','relative');
        $("object").css('z-index','1').css('position','relative');
        $("embed").css('z-index','1').css('position','relative');

        var elements = document.getElementsByTagName('embed');
        for(var i=0; i< elements.length; i++){

                elements[i].setAttribute("wmode","transparent");

                var para = document.createElement("param");
                para.setAttribute("name","wmode");
                para.setAttribute("value","transparent");

                elements[i].parentNode.appendChild(para)

        }

    }

    $(document).ready(function() {
        $(".oembed").oembed(null,
            {
            embedMethod: "append",
            maxWidth: 500
            });

        setTimeout('fixZindex()',1000);

    });

I apologize for the mix of js/jquery. I'm not a jquery expert by any means so if someone can recode that solution in straight jquery that'd be rad.