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

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

Answer 3

您应该在flash元素中添加wmode的参数，该元素将成为标记中的对象标记。尝试找到object元素并尝试这个

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

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

3 个答案: