javascript - youtube's embeded video wont go behind other elements - Stack Overflow

admin管理员组

文章数量:1320661

I have a site that has YouTube's embedded video in it, my problem is, these videos don't obey the z-index rules. All the YouTube videos are displayed on top of all other elements. I tried

$('iframe','.video_container').attr('wmode','opaque');
$('iframe','.video_container').attr('z-index','1');

I found that the wmmode has to be changed to opaque, but isn't this for the old embedded videos?? How do i achieve this for both old embedded style videos and the new iframes??

Edit: Even this didn't work on old embedded videos

$('object','.video_container').append('<param name="wmode" value="opaque"></param>').find("embed").attr('wmode', 'opaque');

this works on iframe videos

var src=$('iframe','.video_container').attr('src');
 if(src.indexOf('?')==-1)
 {
  src=src+'?wmode=transparent';
 }
 else
 {
  src=src+'&wmode=transparent';
 }
 $('iframe','.video_container').attr('src',src);

but i still haven't found a way for old embed videos This is the resultant code after manipulating using js that doesn't work

<object width="320" height="240">
<param name="movie" value=";hl=en_US&rel=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src=";hl=en_US&rel=0" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"/>
<param name="wmode" value="opaque"/>
</object>

I have a site that has YouTube's embedded video in it, my problem is, these videos don't obey the z-index rules. All the YouTube videos are displayed on top of all other elements. I tried

$('iframe','.video_container').attr('wmode','opaque');
$('iframe','.video_container').attr('z-index','1');

I found that the wmmode has to be changed to opaque, but isn't this for the old embedded videos?? How do i achieve this for both old embedded style videos and the new iframes??

Edit: Even this didn't work on old embedded videos

$('object','.video_container').append('<param name="wmode" value="opaque"></param>').find("embed").attr('wmode', 'opaque');

this works on iframe videos

var src=$('iframe','.video_container').attr('src');
 if(src.indexOf('?')==-1)
 {
  src=src+'?wmode=transparent';
 }
 else
 {
  src=src+'&wmode=transparent';
 }
 $('iframe','.video_container').attr('src',src);

but i still haven't found a way for old embed videos This is the resultant code after manipulating using js that doesn't work

<object width="320" height="240">
<param name="movie" value="http://www.youtube./v/-SNytfkJD4U?version=3&hl=en_US&rel=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src="http://www.youtube./v/-SNytfkJD4U?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"/>
<param name="wmode" value="opaque"/>
</object>

• javascript
• jquery
• html
• css
• youtube

Share Improve this question Follow edited Aug 16, 2011 at 16:27 sasidhar asked Aug 16, 2011 at 15:29 sasidharsasidhar 7,7621616 gold badges5151 silver badges7878 bronze badges 2

• 2 so if you have used my answer you could have at least voted it up -.- that is not very kind of you, and will probably lead to people not helping you again .. – GorillaMoe Commented Aug 16, 2011 at 16:02
• sorry about that, i was very worried about it to work. did it now... if you can get the old embed videos work, that can as well serve me as a plete answer – sasidhar Commented Aug 16, 2011 at 16:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

just alter your iframe src like this

http://www.youtube./embed/UUeRCDyVspR2M?wmode=transparent

so the flashplayer served by google will render like you told em with that parameter :)

you simply have to add ?wmode=transparent to the params or do it like this

http://www.youtube./embed/UUeRCDyVspR2M?param1=bla&param2=foo&and_so_on=more&wmode=transparent

so you simply have to append

&wmode=transparent

to the end of the url

<script type="text/javascript">
var googleFooYou_tube = function(){
    var objs = document.getElementsByTagName('object');
    var length = objs.length;
    for(var i=0; i<length; i++){
        if(objs[i].className == 'video_container'){
            var param = document.createElement('param');
            param.name='wmode';
            param.value='transparent';
            var origEmbed = objs[i].getElementsByTagName('embed')[0];
            var newEmbed = '<embed wmode="transparent" src="'+origEmbed.src+'" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true">';
            objs[i].appendChild(param);
            objs[i].removeChild(origEmbed);
            objs[i].innerHTML=objs[i].innerHTML+newEmbed;
        }
    }
}
</script>

and your html code so far

<object width="425" height="349" class="video_container">
<embed src="http://www.youtube./v/-SNytfkJD4U?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
<param name="movie" value="http://www.youtube./v/-SNytfkJD4U?version=3&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</embed>
</object>
<script>googleFooYou_tube();</script> // added this at the bottom of your page

It's not usuable as it is... I mean the function... but you can alter it for your needs... and make it look more appealing if you want. It is just a quick and dirty approach and it works flawlessly.

You should add a param for wmode in the flash element which will be an object tag in your markup. Try to find the object element and try this

$('object','.video_container').append(
    $("<param/>").attr({
        'name': 'wmode',
        'value': 'opaque'
    })
).find("embed").attr('wmode', 'opaque');

本文标签： javascriptyoutube39s embeded video wont go behind other elementsStack Overflow