[![解决网站嵌入优酷视频堆叠顺序的问题](https://pic.salongweb.com/2016/06/youku-z-index.jpg)](https://pic.salongweb.com/2016/06/youku-z-index.jpg "解决网站嵌入优酷视频堆叠顺序的问题")很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响，在视频页面有滚动、弹窗和浮动的元素就会被视频所遮挡，造成差的浏览体验，那我们就得解决。

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

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

1. <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”属性的代码为：

1. <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，通过这段代码就能享受很多服务，这样管理也较为方便。
优酷视频云提供的默认代码：

1. <div id=“youkuplayer” style=“width:480px;height:400px”></div>
2. <script type=“text/javascript” src=“http://player.youku.com/jsapi”></script>
3. <script type=“text/javascript”>
4. player = new YKU.Player(‘youkuplayer’, {
5. styleid: ‘0’,
6. client\_id: ‘替换成优酷视频client id’,
7. vid: ‘替换成优酷视频ID’,
8. newPlayer: true
9. });
10. </script>

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

1. <div id=“youkuplayer” style=“width:480px;height:400px”></div>
2. <script type=“text/javascript” src=“http://player.youku.com/jsapi”></script>
3. <script type=“text/javascript”>
4. player = new YKU.Player(‘youkuplayer’, {
5. wmode: ‘opaque’,
6. styleid: ‘0’,
7. client\_id: ‘替换成优酷视频client id’,
8. vid: ‘替换成优酷视频ID’,
9. newPlayer: true
10. });
11. </script>

\[successbox\]这样使用HTML代码或优酷视频云提供的代码就完美的解决元素堆叠顺序的问题，现在WP也可以直接输入视频链接，对于这样的嵌入方式有好的解决方法再列举出来。\[/successbox\]