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

【问题标题】：facebook and css, how to place a like comment dialog on top of a video?facebook和css，如何在视频顶部放置一个喜欢的评论对话框？
【发布时间】：2011-09-24 17:28:33
【问题描述】：

我有一个 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>

有什么想法吗？

谢谢

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

谢谢大家

【问题讨论】：

我会把赞按钮放在视频旁边。即使您确实修复了 z-index，它也会看起来很糟糕。

标签： css facebook

【解决方案1】：

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

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

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

这里还有一个javascript solution，虽然看起来比较麻烦，但不需要代表您进行硬编码。

【讨论】：

解决方法是在 youtube iframe src 上添加 ?wmode=opaque