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.
Related
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.
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.
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...
I have flash like a background on my page and all content on page is in the html tags witch is over that flash, and that works very nice. A cover div for that flash have a fixed position (position:fixed;) in style, that is important for scrolling feature.
My problem is in following when I try to include additional page, in iframe on the center of current page, and that new page containing some flash object, that object is not not visible in iframe, its here but its above the fixed flash object, if I remove (position:fixed;) from style, it is visible, but my scrolling feature not work as before. What css style could solve the problem?
Have you tried adding
<param name="wmode" value="opaque">
to the <object> tag of the flash element you can't see? That may help.
If you are writing HTML 5 scrolling is not supported for Iframe
as stated before use object the object tag, and set paramaters.
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600"><param name="movie" value="mainswf/f_cbt.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
Are there any ways providing an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
I’ve found recommendations, like the following from W3C, which determine via JavaScript the existence of Adobe Flash on the client: W3C Providing alternative images
Honestly, I would prefer a non JS technique. I’m thinking of some XHTML tag, equivalent to <noscript>. (like <noobject> if the object (in our case Flash) can’t be displayed/loaded).
The reason for needing this separation is the following:
The bank I’m working for will preferably display their banners in Flash format. In case it isn’t possible a simple image should be shown.
In the past it was solved very likely in the way mentioned before. We’re currently working on a design refresh and that’s where I stumbled upon this piece of code which makes me wonder if it’s really the most elegant and compatible way of doing so.
Another idea that strikes me: Is it actually possible to load Flash-objects in a JavaScript disabled environment?
Actually having flash installed but javascript turned off is a valid scenario. This should work across most browsers:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flash.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
<!--<![endif]-->
<img src="(...)" alt="Put your alternate content here" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
I use the following code for graceful degradation. It works well.
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="100">
<param name="movie" value="flash.swf" />
<!--><!--dgx-->
<param name="loop" value="false">
<param name="menu" value="false">
<param name="quality" value="high">
<img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->
I don't know why you want to avoid javascript, it is the best solution when dealing with Flash.
using the SWFObjects Library (the best known so far for the matter) you can do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Home Page </title>
<meta name="viewport" content="width=780">
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="splashintro">
<img src="splash_noflash.png" />
</div>
<script type="text/javascript">
var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899");
so.write("splashintro");
</script>
</body>
</html>
what the script does is replace the splashintro div with the flash file, if the browser does not support Flash, then does nothing and the splash_noflash.png will be shown.
P.S. With this technique you are ready for the iPhone, instead of showing the blue cube, it will show the image :)
I find using inline styling to do the trick.
For example:
<div style="background-image: url('...');">
<object>
/* Embedded Flash */
</object>
</div>
We can provide an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->
<p>
Fallback or 'alternate' content goes here.
This content will only be visible if the SWF fails to load.
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
And also add this...
<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");
</script>
I have written an easy way to do this in CSS - no extra JavaScript at all.
Name your ID/Class where your Flash movie resides and use a background image. Wrap your Flash movie within that div.
For example:
<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.
Then in your CSS:
#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}
When the Flash isn't available, say on the iphone/pad, the graphic will display. The only drawback with this, that I have found, is that if your Flash movie uses a transparent background, you will see the alt graphic through the transitions. Just make a solid color within the Flash movie as your lowest layer (make sure it's the same bg color as the website) and it will look fine.
~GreaseJunkie