facebook and css, how to place a like comment dialog on top of a video?

i have a youtube video and a like button on top of it. The problem occurs when i click the like button and the 'leave comment' dialog opens. it goes underneath the video.

<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="4开发者_如何学C0" 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>

any ideas?

thanks

the solution is to add ?wmode=opaque on the youtube iframe src. ex: <iframe width="300" height="200" src="http://www.youtube.com/embed/-oQFSfuRy24?wmode=opaque" frameborder="0" allowfullscreen></iframe>

thanks all

You can try defining some properties for the <param> element of the video embed:

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

That should make the video obey the z-index stacking of elements on the page. However, you have been warned that using this method may cause massive slowdowns.

There is also a javascript solution to this, although looking more cumbersome, doesn't require hardcoding on your behalf.