<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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
Set a z-index for the mask, make it larger
The reason is that the player is made of flash, and the level is infinitely high. This is generally done:
However, this method is not perfect in compatibility.For IE, add the parameter <param name="wmode" value="opaque" /> for IE in <object></object> Add parameter wmode="opaque"
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.
Set absolute positioning for the mask and add z-index, refer to http://m.jb51.net/web/444162....