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?
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.
Related
I have a live event site and list of events in a mouse over menu.
The flash streaming player stays in front of the mouse over menu with all versions of IE.
Wmode parameter solved so many people's problem in the past but it does not work in my case. Here is the rendered flash object for player:
<object id="flowplayer" width="100%" height="100%" wmode="transparent" data="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<!-- load configuration from config.js -->
<param name="flashvars" value="config=player.aspx?pID=585&config=1">
<param name="wmode" value="transparent">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf">
<param name="allowfullscreen" value="true">
</object>
I also tried 'wmode=opaque' and did not work.
I'm making an educated guess since you didn't add the code, but try this:
object{z-index:-1}
.menu{z-index:100}
of course .menu should be changed to the class of your menu, but you'll get the idea
I have a CGI in an object (from an ethernet webcam) which works fine for most browsers but not for IE (10). The problem is that my menu should be shown above that element but it isn't. I know of but that - as it seems - only applies to SWF sources in an object. Also, zindex could not help.
In other words, this
<object width="640" height="480" id="Player" classid="CLSID:..." codebase="http://my.server/activex/AMC.cab#version=2,0,22,0" style="z-index: 104;">
<PARAM NAME="_cx" VALUE="16933">
<PARAM NAME="_cy" VALUE="12700">
<PARAM NAME="MediaURL" VALUE="http://my.server/axis-cgi/mjpg/video.cgi?resolution=640x480">
<PARAM NAME="UIMode" VALUE="none">
<PARAM NAME="MediaType" VALUE="mjpeg-unicast">
<PARAM NAME="MPEG2VideoDecodingMode" VALUE="3">
<param name="wmode" value="transparent">
<p>Error</p></object>
does hide an absolutely positioned menu dropdown that should be shown above it.
Any ideas on that?
Best regards,
Mario
I'm using video.js (v 4.3.0) with flash player on internet explorer.
How can i stretch the video to container area like in this example http://www.aleosoft.com/flashtutorial_autofitexample.html?
I've tried some modification on video.dev.js file to add <PARAM NAME="SCALE" VALUE="exactfit"> on generated flash object. And also i've changed the wmode from opaque to transparent like in the example page code. Modified video.js generates the flash player as below and still not stretching.
<object width="100%" height="100%" class="vjs-tech" name="video_1_flash_api" id="video_1_flash_api" data="video-js.swf" type="application/x-shockwave-flash" style="display: block;">
<param value="video-js.swf" name="movie">
<param value="readyFunction=videojs.Flash.onReady&eventProxyFunction=videojs.Flash.onEvent&errorEventProxyFunction=videojs.Flash.onError&autoplay=true&preload=auto&loop=undefined&muted=undefined&src=http%3A%2F%2Flocalhost%2Fh5mp%2F_html%2F1.html&" name="flashvars">
<param value="exactfit" name="scale">
<param value="always" name="allowScriptAccess">
<param value="all" name="allowNetworking">
<param value="transparent" name="wmode">
</object>
I am trying to display alternate text on browsers/devices where flash is not supported.
I have searched different sites and tried different codes but I'm failing to get anything effective.
Code is below, the flash displays animated text:
class="result10435918"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0"
width="595"
height="39"
id="haxe"
align="middle">
<param name="movie" value="logo70644855.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/homeheader2.swf"
wmode="transparent"
width="595"
height="39"
name="haxe"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
></embed>
Thanks
Ciaran
Try using an object tag to wrap the flash piece, and inside of it have your fallback text. Setting a width and height in the object tag defines a specific amount of space for the flash to take up. If that flash isn't loaded, it will display what else is inside of the object tag (the fallback text). You can also include images or something else in place of the Fallback Text.
<object type="application/x-shockwave-flash" data="yourmovie.swf" width="400" height="300">
<param name="movie" value="yourmovie.swf" />
Fallback Text Here
</object>
I have a Youtube video on my homepage, and now I need a modal to display on certain events.
For some reason, even when adding <param name="wmode" value="transparent"> to the Flash object, it still covers the HTML elements (with higher z-index too).
I've got it on JSfiddle.
I figured maybe an iframe could solve this, but that would require me to make a new page just to put the video on.
Am I doing something wrong?
Thanks
Update
Strangely, this behaviour happens on Windows Firefox and IE8. On Firefox on Mac, it renders fine.
You have both an embed and object. You need to apply the wmode to the embed.
http://jsfiddle.net/zCDVx/2/
<object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&hl=en_GB">
<param name="wmode" value="transparent">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" wmode="transparent"></embed>
</object>
You need the wmode both as an object param and as part of the embed to work in all browsers.
<object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&hl=en_GB">
</param>
<param name="wmode" value="transparent"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/_-wDuGDtjCc?fs=1&hl=en_GB" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="640" height="385"
wmode="transparent">
</embed>
</object>
Notice the 2nd to last line.
See it here.