I have embedded a flash banner on my wordpress site, by editing the header.php file. The banner itself has been hardcoded with the link, but once its on my website it is not clickable in Chrome (FF and IE work fine).
I then added another banner using the same code (except for the file name), which works on all browsers (the second banner was added using a widget).
Any ideas?
Thanks.
Y.
The banner can be found above the header, here: http://wordsandmusic.me
This is the code I am using:
<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="728" HEIGHT="90" id="http://wordsandmusic.me/wp-content/uploads/Flash Banners/banner_02.swf" ALIGN="Middle">
<PARAM NAME=movie VALUE="http://wordsandmusic.me/wp-content/uploads/Flash Banners/banner_02.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=AllowScriptAccess VALUE="always"> <PARAM NAME=bgcolor VALUE=#333399> <EMBED src="http://wordsandmusic.me/wp-content/uploads/Flash Banners/banner_02.swf" quality=high bgcolor=#333399 WIDTH="728" HEIGHT="90" NAME="http://wordsandmusic.me/wp-content/uploads/Flash Banners/banner_02.swf" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" AllowScriptAccess="always"></EMBED> </OBJECT>
You should try to delete this:
<div class="background-cover"></div>
Or at least modify the rules for that class. What are you using that div for?
Add the following css code to the <div> which contains the flash object:
<div style="text-align:center;position:relative;z-index:1;">
<object>Flash object will come here</object>
</div>
I have added inline css in the above code.
Related
I'm managing this site: (no joke)
http://www.orgasmatrix.fr/webcams
As you can see, when you put your mouse over "Categories" the menu appears below the iframe called "chat_".
I have search about it. I have read and test with "position:absolute" and "z-index:-999", but no way.
I have found another tip with the iframe embenbed and try to put "?wmode=transparent" or "?wmode=opaque" as a parameter.
Also I have tested with , and also with the atributte allowtransparency="true". But no way, the iframe always appear above the "Categories" menu.
Any help?
I'll be very grateful.
The problem isn't with your code, but deeper - in very nested iframe (I have counted 3) with that chat element:
<object type="application/x-shockwave-flash" data="http://img.media-rendering2.com/market2/livecams/chat_coquin/chat_v2.swf" wmode="transparent" width="300" height="405" id="chatCoquinTac" style="visibility: visible; "><param name="menu" value="false"><param name="quality" value="high"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"><param name="flashvars" value="url_acces=&url_image=http%3A%2F%2Fimg.media-rendering2.com%2Fmarket2%2Flivecams%2Fchat_coquin%2F&sexe=h&langue=fr&webcam=7&pseudo=Julia&ville=Warsaw&format=2&temps=1338679111"></object>
As you can see I have added (with developer tools) <param name="wmode" value="transparent"> and wmode="transparent" to <object> and it worked as it should (Chrome 19) - your categories menu appears above chat window.
how do can I make the below full size flash inside my web browser aligned centre?
<body bgcolor="#000000">
<form id="form1" runat="server">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="50%" height="900">
<param name="movie" value="css/index.swf" />
<param name="quality" value="high" />
<embed src="css/index.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</form>
</body>
You need to set width="100%" in the "embed" tag, not just in the "object" tag. Incidentally, the size you currently have set in the "object" tag is 50%. Oh and you'll probably want to set the page margins to 0.
To then adjust the placement of objects in reaction to the stage resize use stage.stageWidth
Incidentally, the specific embed method you are using is what you get when you publish from Flash directly, and that positions things differently than the embed method when you publish from FlashDevelop. FlashDevelop inserts some JavaScript that centers automatically without the developer having to do anything. I didn't until just now even notice that, it's pretty convenient.
To go full screen in flash you have to change the displayState of the stage. The following line would accomplish this:
stage.displayState = StageDisplayState.FULL_SCREEN;
I'm working on this website: http://www.oklahomainsightstv.com/ and I'm trying to get the navigation drop down to show up ON TOP of the video object. I've tried a few versions of z-index in the CSS but nothing has worked.
This is my code:
<div id="hero" style="z-index:-1; position:relative;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="437" height="266" id="viddler_e3f5a526"><param name="movie" value="http://www.viddler.com/simple/e3f5a526/" /><param name="wmode" value="transparent" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><embed src="http://www.viddler.com/simple/e3f5a526/" width="437" height="266" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" name="viddler_e3f5a526"></embed></object>
</div>
Its a browser bug !
Flash, iframes are visible above the menu. Place video object far from the menu.
Without testing it myself, a quick search revealed that there are two things you might not be doing:
Add the wmode parameter to your video object and use the value "transparent": <param name="wmode" value="transparent" />
Make sure you specify the position:relative; style to the menu with the z-order. Otherwise, the z-order won't be applied.
If that doesn't work, you may have encountered a limitation of a given browser, in which case, you may have to design the site so that plugins don't have the opportunity to overlap.
Sources
Google Chrome is displaying the z-index of a Flash video incorrectly.
Take a look at http://maxusglobal.com/ in Firefox or Internet Explorer.
Now take a look at it in Chrome.
The big video at the top of the page should have a "preview" image z-indexed over the top of it. It does in Firefox and Internet Explorer, but not Google Chrome.
This doesn't seem to be a WebKit thing, but specifically a Chrome bug.
I have tried all the wmodes, (opaque, window and transparent), but this doesn't fix it. I also changed the z-index of the Flash box, but it is still not working.
Add wmode="transparent" to your <embed> tag. Like the following.
<embed wmode="transparent"
height="314" width="516"
type="application/x-shockwave-flash"
id="player"
name="page_player"
src="/swfs/player.swf"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=/attachments/files/u_t_o_N_1.mp4">
And hide the div of the hello image if that is not necessary.
I hope this helps!
There are a couple of options here as I see them:
Option 1
Use the wmode tag and you need to set this as the object is rendered. Adding it later will not work (ref1) (ref2)
Using opaque should allow you to target the object with CSS z-index styles. Be aware that you should set this value in the <embed> tag as well as as a param (ref3) (ref4)
Option 2
Hide the object until a user has clicked on your preview button. I spent ages tracking down the javascript that you used before I noticed that Sotiris had said the same thing. I believe this is your code here:
$('#play_video_box').click(function(){
if(app.isiPhone() == "iphone" || app.isiPhone() == "ipad"){
return true;
}
$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var player = document.getElementById('player');
player.sendEvent('PLAY');
return false;
});
I would amend one line to:
$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});
And use CSS to set visibility to hidden by default. Depending on your no javascript support requirements you may need to modify that.
The third link provided here is a rather good article on wmodes and how they work - I recommend checking that out if you decide to go with option 1 and run into trouble.
Hope that helps!
I too was having a problem with the z-index of embedded Flash objects when using Google Chrome 8. Everything worked perfectly in IE 7. lnrbob hit the nail on the head with his option 1 solution. I had set wmode to opaque in the <embed> tag; but I neglected to add wmode as a <param> tag. Once I added <param name="wmode" value="opaque"/> between the <object> tag and the <embed> tag, the z-index started to work perfectly in Chrome without breaking IE.
It doesn't work in Firefox 3.6 and Opera 10, also in Windows.
Possible solution: Just add in your CSS visibility:hidden; for the selector #both_video_and_preview_image #video_wrapper.
Then add jQuery code (I see that you use the library), so when the user click the preview image then the visibility change for the above selector to visible.
$("#page_video_preview_image").click(function() {
$("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})
the following code works in ie,firefox,opera, but not worked on chrome(version 21)
<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="300" height="250">
<param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf">
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://img.emarbox.com/dsp/img/300x250.swf" wmode="opaque" allowfullscreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250"></embed>
</object>
<div style="cursor: pointer; margin-top:-250px; width:300px; height:250px; z-index:1; visibility: visible;">
<a href="http://www.emarbox.com" target="_blank" >
<img border="0" src="http://img.emarbox.com/dsp/img/flash_blank.gif" width="300" height="250" border="0" /></a>
</div>
Have you tried using SWFObject and loading it like that?
I've tried using wmode transparent codes on my SWF slideshow but the menus still seem to appear behind the Flash in IE8 and Firefox 3.5... In IE7 it works although the looks of the menus aren't as good.
Here's the Flash code:
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','524','height','313','title','LoveRugs','src','http://www.love-rugs.com/Slideshows/Love-Rugs-Slide','quality','high','loop','false','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','http://www.love-rugs.com/Slideshows/Love-Rugs-Slide' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="524" height="313" title="LoveRugs"><param value="transparent" name="wmode"/>
<param name="movie" value="http://www.love-rugs.com/Slideshows/Love-Rugs-Slide.swf" />
<param name="quality" value="high" />
</object>
<embed src="http://www.love-rugs.com/Slideshows/Love-Rugs-Slide.swf" wmode="transparent" quality="high" loop="false" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="524" height="313"></embed>
</noscript>
Can anyone see what's going wrong?
Wrap the flash object in a DIV and give it a z-index that is lower than the item you want to be on top of it.