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

Question

<p class="col-md-4 liveBox">
                    <p style="height:90px">北京商报社总编辑李海：文化正逐渐成为酒企的核心竞争力</p>
                    <p class="embed-responsive embed-responsive-4by3">
                        <iframe frameborder="0" class="embed-responsive-item" src="https://v.qq.com/iframe/player.html?vid=x0513z87cec&tiny=0&auto=0" allowfullscreen></iframe>
                    </p>
                    <p class="liveShade" 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不起作用
请问怎么解决

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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