Z-index doesn't works for Embed Code plugin - html

I used Chrome & Safari browser to view live streaming.
<div style="position:relative; z-index:0;">
<object>
<param name="wmode" value="opaque"></param>
<embed id="SIPCtrl" type="application/xxxxx-plugin" wmode="opaque"></embed>
</object>
</div>
I also try to set like:
<div style="position:relative; z-index:0;">
<object>
<param name="wmode" value="transparent"></param>
<embed type="application/xxxxx-plugin" wmode="transparent"></embed>
</object>
</div>
I have another div to show pop up message. I already set Z-index:1000 but it still doesn't show above the live streaming video (embed plugin). None of those two html could works.
HTML code: http://jsfiddle.net/8C2py/3/
Screenshot:
[Result]: Now is working in Chrome (add iframe), but no luck in Safari browser.
Can anyone tell me my mistake?
Thanks a lot.

Add wmode="opaque" to the object / embed tag parameters and see if it helps.

pretty hard without seeing the entire code....try this
<div style="position:relative; z-index:0;">
on your container div. note: if you set z-index to negative on your container flash won't show up. doesn't look like you are using flash, but i'd avoid it anyways, just in case.

Related

firefox flash wmode direct z-index transparency background

I have this issue with Firefox 28 & 29 on Windows only (Working on OSX for Chrome, Safari, Firefox and on Windows for IE and Chrome)
I have a html modal box with a transparent background and a swf object.
The background stays behind the flash object but the modal content is correctly in front of everything.
If I set my background opacity to 1 it's working fine.
I'm using the wmode='direct' and I can't change it because of 3d library which needs to have the wmode to 'direct'
Here is basically what the code looks like:
<body>
<object type="application/x-shockwave-flash" id="Main" name="Main" align="middle" bgcolor="#fff" data="main.swf" width="100%" height="100%" style="z-index:100;">
<param name="quality" value="high">
<param name="bgcolor" value="#fff">
<param name="wmode" value="direct">
<param name="flashvars" value="myVars">
</object>
<div class="fancybox-overlay fancybox-overlay-fixed" style="background: rgba(0, 0, 0, 0.8);z-index:150;">
<div class="fancybox-wrap fancybox-desktop fancybox-type-ajax fancybox-opened" style="z-index:160;">
<div class="fancybox-skin">
<div class="fancybox-outer">
<div class="fancybox-inner" >
My Modal Box Content
</div>
</div>
<a title="Close" class="fancybox-item fancybox-close"></a>
</div>
</div>
</div>
</body>
Any idea about this one ?
Thanks for your time,
Joris
You can't use HTML-overlay on Flash-object if wmode was set to direct, window or gpu values. Flash doesn't support HTML layering in most browsers for these wmode.
Take a look at table https://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html#main_Browser_support_for_Window_Mode__wmode__values
L = HTML layering is supported. HTML elements can overlap SWF content. Supports explicit control of layering in relation to other HTML elements.

Can someone please solve this? (Basic HTML)

I am using this code to link an embedded .swf file to another page inside an iframe :
<div onmousedown="window.location.href='http://www.pagewhichopens.com'" height=26 width=100>
<object height=26 width=100>
<param name="movie" value="http://www.bcd.com/embeddedfile.swf">
<param name="wmode" value="transparent" />
<embed wmode=transparent allowfullscreen="true" allowscriptaccess="always" src="http://www.bcd.com/embeddedfile.swf" height=26 width=100></embed>
</object>
</div>
But when I cick on the swf the another page opens inside that iframe only which I don't want, I want it to open in the whole browser... which can be done by inserting target="_parent", but where should I put it?
Use top.location to set the location of the top frame or parent.location for the immediate parent. window refers to the current context (inside the frame).
To open some link in a new tab use target="_blank" to achieve this

swf working in Chrome but the spacing of the layer is off?

Here's the problem:
My sister has a website (www.marycookma.com) and it was created using DreamWeaver with layers. I've recently added an swf using Dreamweaver. It will play in Chrome and IE but the layer for the swf is in a different position in Chrome than it is in IE. The spacing is correct in IE.
It is the only page that has this problem. I have tried different code suggestions for adding the swf however the code I am currently using allows the movie to appear and run correctly.
My problem is the spacing around the layer. I don't know why it's any different than other layers except that it has swf code inside it.
Can anyone please point me to the problem? I inherited the website and I am trying to help keep it going but I'm not up to speed on a lot of things.
I tried to post the two images (viewed through Chrome and viewed through IE) but I'm a newbie so it wouldn't let me. :-(
Here is the code I'm using for the swf video:
<div id="Layer22">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=TV2012&autoPlay=false&autoRewind=false" />
<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=TV2012&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="390" height="400" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
I hope I have included everything that you need. Please let me know if you can tell what the issue it. I very much appreciate the help.
Thank you,
Nancy
I've looked at the page, as for the positioning of your divs/layers they are controlled by the styles for example:
div id="Layer22"
(your player) positioning is controlled by this style:
#Layer22 {
position:absolute;
width:397px;
height:312px;
z-index:26;
left: 289px;
top: 263px;
}
More specifically the top attribute (263px), adjusting top you move the divs/layers up or down. This is true for all Layers in your page.
As for Layer22 with the player if you compare it to the next player in Layer17 there is an iframe in the Layer17 div, if Layer17 behaves maybe you should copy that iframe and use in Layer22.
Hope this helps you some.

firefox object height ignored when data

I have a flash video loading in a modal window. It works in others browsers but not Firefox. Firefox opens the modal window to the correct width of the object, but with no height. I have come to learn that Firefox does not recognize <param> and instead uses the data attribute. However, when I remove this attribute, the modal opens with correct height. What is going on? Here is the code the modal window loads:
<object width="720" height="520" type="application/x-shockwave-flash" data="proxymovie.SWF?file=proxymovie.MP4">
<param name="movie" value="proxymovie.SWF?file=proxymovie.MP4" />
<img src="images/poster.png" width="720" height="480" alt="" title="Download the video below" />
</object>
Firefox ignores object and uses embed. Do you have the height set on the embed tag?
I tried embed earlier to no avail.
<object width="720" height="520" type="application/x-shockwave-flash" data="proxymovie.SWF?file=proxymovie.MP4">
<param name="movie" value="proxymovie.SWF?file=proxymovie.MP4" />
<embed src="proxymovie.swf?file=proxymovie.mp4" width="720" height="520" />
I should clarify that the flash video is there and I can scroll down, but it only shows a sliver of the top in the modal window.

Change the z index of flash content

Basically my problem is the site I am working on has a horizontal drop down menu and I am implementing a flash chart on the page.
When you hover over the menu the items drop down behind the flash chart and are unclickable. Can I get around this somehow?
Make sure you set the wmode to transparent for your flash content.
bgiframe is a jquery plugin that will allow you to do what you are asking; You can do this without jquery (obviously), but the plugin makes it really simple. Technique is basically to add an IFrame around the content you want to show over top of the flash (this also works for hovering content over dropdown lists).
#Fábio Antunes - Who is still wondering here is an example:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="192" height="298">
<param name="movie" value="flash/template2.swf">
<param name="quality" value="high">
<embed wmode="transparent"> <!--THIS IS NECESSARY TOO-->
<param name="wmode" value="transparent">
<embed src="flash/template2.swf" width="192" height="298" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
Setting the wmode to transparent/opaque however, won't work if you are implementing an accessible site (which is now a government law). Setting the wmode to transparent/opque will fix the issue of overlay, but will create more issues with regards to accessibility as you can't tab into the flash content, sometimes you can tab into it once, but as you cycle, you won't be able to tab into it again...