Issue
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;
}
Solution
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.
Answered By - Tom G Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.