Display HTML elements overtop embedded QuickTime

Question

I have a site where a jQuery dialog is used to show videos in a modal frame.

I would like to be able to rest the close button so that it partially covers the embedded QuickTime object, much like the modal frame in this picture:

http://ajaxdump.com/wp-content/uploads/2009/08/MooTools_SqueezeBox-Expandable-Lightbox-308x400.gif

QT always renders above any other element.

I've looked around for solutions, but I've had little luck with it. Is this even possible? Or should I just give up hope now?

Answer 1

You need to adjust the wmode parameter of the Quicktime object to "transparent" in order for it to display beneath other content.

You'd want to set it up like this in your HTML:

<object width="500" height="250" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"
            id="video_object"  style="behavior:url(#qt_event_source);" class="plugin" > 
   <param name="src" value="whatever.png"> 
   <param name="autoplay" value="false"> 
   <param name="postdomevents" value="true"> 
   <param name="wmode" value="transparent"> 
   <param name="controller" value="false"> 
   <param name="scale" value="tofit"> 
   <embed id="video_embed" class="plugin"
        type="video/quicktime" src="whatever.png"
        wmode="transparent" postdomevents="true" controller="false" scale="tofit" > 
    </embed> 
</object> 

Have a look at this demo.