CODEWITHSUNDEEP
css
Butterslices
Butterslices

Reputation: 35

Place a div containing video over a jpeg

I'm super new to coding so apologies if this frustrates anyone!

I'm working on a Wordpress site and I'm trying to lay a video (actually a shortcode) over a jpeg, like this;

http://imagizer.imageshack.us/v2/617x176q90/540/OJCIR1.jpg

Then place a video thumbnail (that opens into a lightbox when clicked) on the grey area. Here's my HTML:

<div style="width: 640px; height: 480px;">
    <img src=".../uploads/2015/01/watch.jpg" style="z-index:-1" />
    <div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
    </div>
</div>

And here's my CSS:

div.videodiv {
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
}

As I'm sure you can tell I'm brutally savaging this code from tips found online.

Any help would be massively appreciated, and how do I insert code into these topics?!

Sorry!

Upvotes: 1

Views: 81

Answers (2)

Skatox
Skatox

Reputation: 4284

Actually, it's better to set the image as background and then align the video to the place where you want it, something like this:

HTML

<div class="wrapper">
    <div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
    </div>
</div>

CSS

div.wrapper {
    width: 640px; //Change it to image's width
    height: 480px; //change it to image's height
    background: url(.../uploads/2015/01/watch.jpg) #fff;
}  

div.videodiv {
    right: 20px; //distance from right border to gray rectangle border 
    top: 10px; //distance from top border to gray rectangle top border
    position: absolute; //let total control of the position of the video
}

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Use position: absolute; rule in the video and position relative in the image, and then play with the position right and top in the video

CSS EXAMPLE

div.videodiv {
    right: 0px;
    top:0px;
    z-index: 999;
    position: absolute
} 

img{
position: relative;
z-index: 998;
}

Upvotes: 0

Related Questions