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

Question

我有一个包含 YouTube 嵌入视频的网站，我的问题是，这些视频不遵守 z-index 规则。所有 YouTube 视频都显示在所有其他元素之上。我试过了

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

我发现必须将 wmmode 更改为 opaque，但这不是针对旧的嵌入式视频吗？ 我如何为旧的嵌入式样式视频和新的 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

所以由 google 提供的 flashplayer 将按照你告诉他们的参数呈现:)

您只需将 ?wmode=transparent 添加到参数或这样做

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

所以你只需要追加

&wmode=transparent

到网址的末尾

Answer 2

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

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

Answer 3

<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

它不可用...我的意思是功能...但是您可以根据需要对其进行更改...如果您愿意，可以让它看起来更有吸引力。这只是一种快速而肮脏的方法，而且效果很好。