CODEWITHSUNDEEP
htmlcssimagevideo
hduncan
hduncan

Reputation: 65

How can I place a embedded video on-top of an image in HTML/CSS?

So I'm trying to create a simple layering technique, by putting an image behind a video in html/css. To give the video section some meaning and background style.

Heres a photoshop mockup of what I'm trying to achieve.

http://s8.postimg.org/tl749vxvp/example.jpg

HTML

 div id= "background">
 img src="images/imgc.jpg" class="stretch" alt="image"
 *Video embedding goes here*

CSS

.stretch {
    width : 100%;
    height: auto;%;
}

#background {
    position: relative ;
}

#wrapper {
   background-size: 100% auto;
}

Upvotes: 0

Views: 20830

Answers (3)

Tom G
Tom G

Reputation: 3650

You need to center the video player div over the image(or preferably, a div with a background image). Here's some html:

<html>
    <head>
        <!-- Flowplayer js and css -->
    </head>
    <body>
        <div style="width:100%; height:100%; background-image:url('path/to/your/image.png');">
            <div id="player" style="width:600px; height:400px; position:absolute; left:50%; margin-left:-300px; top:50%; margin-top:-200px"></div>
        </div>
    </body>
</html>

Note: that this css:

width:600px;
height:400px;
position:absolute;
left:50%;
margin-left:-300px;
top:50%;
margin-top:-200px

makes a div of 600px x 400px and centers it within the parent div. If you need to change the height to 800px for example, change margin-top to 1/2 of the amount, in this case -400px

I should mention that there are various css options for the background image of the main div, read about them here: http://www.w3schools.com/cssref/css3_pr_background.asp. You may want to look at background-size:contain

After you have the div centered over the image as desired, just follow the instructions here (http://flash.flowplayer.org/documentation/installation/index.html) to get your video playing with flowplayer.

Upvotes: 2

Jerreck
Jerreck

Reputation: 3010

The easiest method would be to place the video in a div and set that div's CSS background-image property to the image you are trying to use:

HTML:

<div class="film-background">
    *Video embedding goes here*   
</div>

CSS:

.film-background {
    background-image: url('url of your film image');
    background-repeat: no-repeat;
}

OR you could use absolute positioning and z-index, and apply the style to the image instead of the container div:

HTML

<div>
    <img src="img link" class="film-background">
    *Video embedding goes here*   
</div>

CSS

.film-background {
   z-index: -1;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

Upvotes: 1

user2895432
user2895432

Reputation:

I would use z-index, this allows you to set the vertical stacking

See: http://html.net/tutorials/css/lesson15.php

and

http://css-tricks.com/almanac/properties/z/z-index/

Upvotes: 1

Related Questions