Overlapping a Youtube video with an image

I just wanted to know if it was possible to overlap a YouTube video (the actual video player) with an image. What 开发者_高级运维I want to do is make it look like there are two hands gripping the YouTube video, one left and one right. I figured it's a simple CSS thing, but wasn't sure since I couldn't find anything online (all I found was images overlapping images and fading in and out). Anyway, any help would be appreciated. Thanks!

use the iframe method and add ?wmode=opaque to the end of the URL of the video.

example:

<iframe width="630" height="328" src="http://www.youtube.com/embed/BS0PaiHkbU0?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>

You could add the YouTube embedded script into a div in the page, then with CSS set the position of that div to relative, now place another div inside of the div that contains the YouTube video and set that div to position absolute, now you can determine where on the page you want you image to appear and it's bounding areas will be defined by the relative divs position.

Here is an example:

<div class="YouTube">
    <!-- embedded YouTube Script -->
    <div class="FloatingImage">
        <img src="#" height="" width="" />
    </div>
</div>

Your CSS could look similar to the following:

<style type="text/css">
    .YouTube { width: 450px; height: 400px; position: relative; }
    .FloatingImage { position: absolute; top: 75px; left: 0px; height: 50px; width: 25px; }     
</style>

Hope this helps!