大理高端网站建设|网站托管|极速建站|WordPress主题设计开发

解决网站嵌入优酷视频堆叠顺序的问题

2016-07-15 870次

解决网站嵌入优酷视频堆叠顺序的问题很多网站都会插入优酷或其它网站的在线视频到自己的网站中,默认情况下优酷视频的堆叠顺序并不受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>

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