CODEWITHSUNDEEP
htmlcssimageyoutubeoverlapping
ClockStrikes11
ClockStrikes11

Reputation: 21

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!

Upvotes: 2

Views: 3601

Answers (2)

Germán Rodríguez
Germán Rodríguez

Reputation: 4288

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>

Upvotes: 6

sfla99
sfla99

Reputation: 99

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!

Upvotes: 1

Related Questions