My youtube video overlaps my nav-menu in internet explorer 7,8 & 9. Ive tried to put high z-index, positioned all parent element to dropdown to relative, put or to the youtube object. Anyone with a fix? I'm about to launch this site in a few hours...
Link: http://nordicinvasion.minex.se/
Thanks!
Edit:
Solved it by my own. I hade to put the wmode transparent tag in embed like this:
instead of in a param in order for it to work properly.
Its now fixed.
Thanks for the quick answers anyway!
I think the problem is in your embed tag.
Try this:
<embed height="292" width="572" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" src="https://www.youtube.com/v/a9PMfUGEj24?controls=1&hd=1&showinfo=0&version=3&rel=0&autohide=0" />
Don't forget to close the embed tag
This should work (their demo worked in IE8 anyway):
<param name="wmode" value="opaque" />
http://slightlymore.co.uk/flash-and-the-z-index-problem-solved/
Related
Please checkout the following code it works perfectly in chrome but not in mozilla firefox. Please help me sort out this problem for firefox.
I want a marquee tag to float over video, ticker like.
I have tried using "relative" and "absolute" position, but somehow z-index over embeded video dosen't seem to work.
Here is the code
I added the ?wmode=opaque at the end of the embed "link".
Check jsFiddle
Your URL : http://www.youtube.com/embed/WfDK-vfPwag?wmode=opaque
also Use <iframe> tag to solve this problem and support all Broswer.
your Updated code
<iframe width="80%" height="100%" src="http://www.youtube.com/embed/WfDK-vfPwag?wmode=opaque" frameborder="0" allowfullscreen></iframe>
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.
I'm having a problem with youtube video embedding;
In some places on my site (like news etc.) video is normally displayed and can be watched, while in others (forum topics mainly) it flickers whenever I mouseover it (making a new HTTP request to YouTube, as I can see in Firebug).
It definitelly has something to do with CSS rendering; when I disable JS nothing changes but disabling CSS causes it to work properly.
Firefox version: 3.6.12
Flash version: 10.1.82.76
The code I'm using for embedding:
<object type="application/x-shockwave-flash" width="390" height="293" data="http://www.youtube.com/v/pIxVoDNbujM?ft=18">
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/pIxVoDNbujM?ft=18"></param>
</object>
(to keep it W3 HTML valid, flickering happens with normal embed code as well).
You can see it 'in action' here:
Youtube embed code flickering in Firefox
Edit: OMG, it works properly when I'm logged out... Now nothing is clear to me as CSS is the same for users and guests, there are just few minor differences in markup...
It was because of the elements that followed the embed (same level children of the parent div), there was a non-block-level element (small) with class clearfix (doing a clear:both), which was wrongly interpreted by Firefox.
Putting a display:block; on .clearfix did the trick, it's working perfectly now.
It does work fine for me (Firefox 4 beta), so maybe it's your browser..
I suggest you to use SWFObject always to embed Flash. It's the best and most compatible way to do it, and maybe you will already get rid of your issue then.
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?
Situation: Got a flash object with an icon bar (div with pngs) on top of it. Works on all browsers except Firefox 3.6 on Ubuntu 8. Example: http://ListAndPlay.com
Problem: Icons suddenly disappear after the flash is being loaded. See this screenshot: http://api.browsershots.org/png/512/e3/e30de0b1ad995fa1aa9c14cbc19fb43c.png
What I've tried: Setting z-index, recoding the JQuery behind it, nothing works.
I'm very curious what I did wrong and how you would fix this issue :)
Set wmode to opaque.
<object height="100%" width="100%" type="application/x-shockwave-flash" id="ytPlayer" data="http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer" style="height: 286px; width: 1280px;"><param name="allowScriptAccess" value="always"><param name="wmode" value="opaque"></object>