css - 遮罩层遮不住视频是什么原因

问题描述

<p class='col-md-4 liveBox'> <p style='height:90px'>北京商报社总编辑李海：文化正逐渐成为酒企的核心竞争力</p> <p class='embed-responsive embed-responsive-4by3'><iframe frameborder='0' src='https://v.qq.com/iframe/player.html?vid=x0513z87cec&tiny=0&auto=0' allowfullscreen></iframe> </p> <p style='position: absolute;top: 0;bottom:0;left:15px;right:15px;background: #000;opacity: .7'></p></p>

加z-index也不行

在liveBox上设置:hover{cursor:pointer}只是在p部分起作用 iframe不起作用 请问怎么解决

问题解答

可以把视频容器加上绝对定位，然后弹框加z-index试试，不过看你播的是腾讯视频，所以还有个解决方案是试试上腾讯的统一播放器。

给遮罩设置一个z-index吧，设置大一点

原因是播放器是用flash做的，层级无限高。一般是这样做的：针对IE 在<object></object>内加上参数<param name='wmode' value='opaque' />针对FF 在<embed />内加上参数wmode='opaque'

但是，这个方法并不完美存在兼容性。个人认为比较简单的方法是在弹窗弹出时用’position:absolute;top:100000px;’的方法将视频藏起来。

给遮罩设置绝对定位,在加上z-index参考http://m.jb51.net/web/444162....