很多网站都会插入优酷或其它网站的在线视频到自己的网站中,默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响,在视频页面有滚动、弹窗和浮动的元素就会被视频所遮挡,造成差的浏览体验,那我们就得解决。

使用HTML代码嵌入的优酷视频

通过使用HTML代码embed嵌入的优酷视频我们可以添加在embed标签中添加wmode="opaque"属性,比如默认的视频优酷为:


<embed src="http://player.youku.com/player.php/sid/XMTM1NjAxNDg3Mg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

添加wmode="opaque"属性的代码为:


<embed wmode="opaque" src="http://player.youku.com/player.php/sid/XMTM1NjAxNDg3Mg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

使用HTML代码嵌入的优酷视频

因为获取缩略图要使用到client id,开发的视频主题使用优酷视频云提供的代码,同样也不受CSS样式z-index属性的影响,如果开通了优酷VIP,通过这段代码就能享受很多服务,这样管理也较为方便。
优酷视频云提供的默认代码:


<div id="youkuplayer" style="width:480px;height:400px"></div>
<script type="text/javascript" src="http://player.youku.com/jsapi"></script>
<script type="text/javascript">
    player = new YKU.Player('youkuplayer', {
        styleid: '0',
        client_id: '替换成优酷视频client id',
        vid: '替换成优酷视频ID',
        newPlayer: true
    });
</script>

此时wmode="opaque"代码添加的位置有所不同,我们要添加到JS代码中,同时需要修改成“wmode:'opaque',”,完整的代码如下:


<div id="youkuplayer" style="width:480px;height:400px"></div>
<script type="text/javascript" src="http://player.youku.com/jsapi"></script>
<script type="text/javascript">
    player = new YKU.Player('youkuplayer', {
        wmode: 'opaque',
        styleid: '0',
        client_id: '替换成优酷视频client id',
        vid: '替换成优酷视频ID',
        newPlayer: true
    });
</script>