mpg files and z-index positioning

Question

Is there a way to hide .mpg files under other elements in CSS?

I have a position:fixed; menu on a website I'm designing, and I have it set to be on top of all other elements in the page. However, when I added a .mpg movie to the content, it seems to stay on top of everything--including the menu.

The page is here: http://adamnbowen.com/topology/. I tried adding position:fixed and z-index:0 just to experiment with the z-index of the movie, but it seems unaffected... Am I overlooking something, or is this not possible to do in CSS, or is there a bug in Firefox 3.5, etc...

So if there is a solution in CSS or javascript or something, that'd be great. Otherwise, if the problem is solved by turning the .mpg file into a .swf file or something, that'd also be acceptable. I'd much rather avoid having to use an animated gif, as that will be many multiples the size of the .mpg file...

Thanks for any potential help,

Answer 1

Certain content is rendered on top of everything else. Usually it's anything declared with object or embed tags but in IE 5 and 6 drop down lists.

I used the following functions in conjunction with JQuery to suppress and unsuppress page elements as needed when I was rendering flyout menu structures on a recent project.

function suppressElements(owner) {
    //check for unsurpressed elements and suppress
    $("select[suppressor=], object[suppressor=], embed[suppressor=], input[suppressor=]")
        .attr("suppressor", owner)
        .animate({ "opacity": 1 / 100 }, 100, function() { $1_3(this).css("visibility", "hidden") })
}

function unsuppressElements(owner) {
    //check for elements you surpressed and unsuppress
    $("select[suppressor='" + owner], object[suppressor='" + owner], embed[suppressor='" + owner], input[suppressor='" + owner]")
        .attr("suppressor", "")
        .css("visibility", "visible").animate({ "opacity": 1 }, 100)
}

In your case I would get the distance of the embed element from the top of the page and bind something to the window's scroll event to watch for when the scrollTop of the page and suppress the embed when it's underneath the menu.