css - Why the mask layer cannot cover the video

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>

Adding z-index won’t work either

Setting:hover{cursor:pointer} on the liveBox only works in the p part. iframe does not work
How to solve it

Answer 1

You can add absolute positioning to the video container, and then add z-index to the pop-up box to try. However, it seems that you are playing Tencent video, so another solution is to try Tencent's unified player.

Answer 2

Set a z-index for the mask, make it larger

Answer 3

The reason is that the player is made of flash, and the level is infinitely high. This is generally done:
For IE, add the parameter <param name="wmode" value="opaque" /> for IE in <object></object> Add parameter wmode="opaque"

However, this method is not perfect in compatibility.

Personally, I think the simpler way is to use the 'position:absolute;top:100000px;' method to hide the video when the pop-up window pops up.

Answer 4

Set absolute positioning for the mask and add z-index, refer to http://m.jb51.net/web/444162....