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 在內加上參數
針對FF 在內加上參數wmode=" opaque"

但是，這個方法並不完美存在相容性。
個人認為比較簡單的方法是在彈跳窗彈出時用'position:absolute;top:100000px;'的方法將影片藏起來。

Answer 4

給遮罩設定絕對定位,在加上z-index參考http://m.jb51.net/web/444162....