youtube的嵌入式视频不会落后于其他元素

Question

我的网站上有YouTube嵌入式视频,我的问题是,这些视频不符合z-index规则.所有YouTube视频都显示在所有其他元素之上.我试过了

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

我发现wmmode必须改为不透明,但这不适用于旧的嵌入式视频吗？我如何为旧的嵌入式风格视频和新的iframe实现这一目标？

编辑: 即使这对旧的嵌入式视频也无效

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

这适用于iframe视频

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);

但我仍然没有找到旧的嵌入视频的方法这是使用不起作用的js操纵后的结果代码

<object width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src="http://www.youtube.com/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>

Answer 1

只是像这样改变你的iframe src

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

所以谷歌服务的flashplayer会像你用那个参数告诉他们:)

你只需要在params中添加？wmode = transparent或者像这样做

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

所以你只需要追加

&wmode=transparent

到网址的末尾

Answer 2

<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>

和到目前为止你的html代码

<object width="425" height="349" class="video_container">
<embed src="http://www.youtube.com/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.com/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

它不可用，因为它是......我的意思是功能......但你可以根据你的需要改变它......并且如果你愿意的话让它看起来更有吸引力。这只是一种快速而肮脏的方法，但效果却完美无缺。