I have a html/css based menu and I'm trying to put a flash video in the banner right under it, but when I hover the dropdown section of the menu it ends up behind it.
Is this a z-index problem or do I need to set certain properties on the flash video?
You will need to add a parameter to the Object tag and a property to the embed tag called wmode and set it to transparent like so:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="798" height="190">
<param name="movie" value="flash/home2.swf">
<param name="quality" value="high">
<PARAM NAME="wmode" VALUE="transparent">
<embed src="flash/home2.swf" quality="high" wmode=transparent pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="798" height="190"></embed>
</object>
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 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>
We have a flash object and when we use blockUI or some other overlay div with opacity < 1, it doesn't make the flash area transparent. However, it do hides the flash object when opacity is 1, but I want to have the overly div transparent which make the flash area transparent too like it doing for other HTML objects.
Is it a know issue/thing? Any workaround?
Here is the code expert:
<object width="100%" height="200" align="" id="charts" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" wmode="transparent">
<param value="/charts.swf?library_path=/charts_library&xml_source=/chart&" name="movie">
<param value="high" name="quality">
<param value="#E6E6E6" name="bgcolor">
<param value="transparent" name="wmode">
<embed width="100%" height="200" align="" salign="TL" scale="noscale" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" swliveconnect="true" name="charts" bgcolor="#E6E6E6" quality="high" src="/charts.swf?library_path=/charts_library&xml_source=/chart&license=">
</object>
For overlay div we are using jQuery.blockUI and FancyBox (when we need to some popup and block the UI). We also tried to overlay the flash object using a div with z-index. It overlays and hides the flash when opacity is 1 but not when it's < 1.
Here is the screen shot:
http://www.4shared.com/photo/PO-Cb1bi/Flash_Overlay_Transparency.html
You need to set the wmode parameter of the flash object to "transparent".
//Article
http://kb2.adobe.com/cps/142/tn_14201.html
//Video tutorial
http://kb2.adobe.com/cps/524/cpsid_52418.html#flash
You need to add the wmode transparent to your <embed> tag as well as the object:
<embed wmode="transparent" ...>
This should fix your problem.
You need to add this parameter in your flash object.
<param name="wmode" value="opaque" />
Here are the details: http://slightlymore.co.uk/flash-and-the-z-index-problem-solved/
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.
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.