1

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="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>

enter image description here

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

Dori
  • 865
  • 1
  • 12
  • 20
Patrioticcow
  • 23,784
  • 68
  • 202
  • 327

1 Answers1

1

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.

Community
  • 1
  • 1
Terry
  • 48,492
  • 9
  • 72
  • 91