css - facebook 和 css，如何在视频顶部放置一个喜欢的评论对话框？

Question

我有一个 youtube 视频，上面有一个喜欢的按钮。当我单击“赞”按钮并打开“发表评论”对话框时，就会出现问题。它位于视频下方。

<div>    
<div class="like_like">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=211607088882&amp;xfbml=1"></script>
<fb:like href="http://www.xxx.com/tpain.php" layout="button_count" show_faces="false" width="240" height="40" action="like" colorscheme="light"></fb:like>
</div>
</div>
<div class="insidde_video">
<iframe width="300" height="200" src="http://www.youtube.com/embed/CNmCOTBsAwQ" frameborder="0" allowfullscreen></iframe>
</div>

有什么想法吗？

谢谢

解决方案是添加?wmode=opaque在 youtube iframe src 上。例如:<iframe width="300" height="200" src="http://www.youtube.com/embed/-oQFSfuRy24?wmode=opaque" frameborder="0" allowfullscreen></iframe>

谢谢大家

Answer 1

您可以尝试为 <param> 定义一些属性视频嵌入元素:

<param name="wmode" value="transparent">

这应该使视频服从页面上元素的 z-index 堆叠。但是，您已被警告使用此方法可能会导致速度大幅下降。

还有一个javascript solution为此，虽然看起来更麻烦，但不需要代​​表您进行硬编码。