I have a section in my HTML page with a height of 500px;.In the center of the section there are Div's which displays some texts.Now as per my requirement i have to add the video as background of this section such that video should be played in the Background with 100% width and 500px height and text should be displayed on the top of the playing video.
But on adding the video ,My design is getting collapsed.My texts are getting displayed beyond 500px height and video is displaying around 250px down from the start of the main section..
Here is my video HTML>.
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
</div>
and Here is my fiddle link Fiddle .Please help me guys i am struggling from long time for this .. Thanks in advance..
I made a change in your css the width should be change from max-width to min-width http://jsfiddle.net/nq8sa2kw/2/ But the problem is that it makes the video unclickable you have to figure out something on your own
.auto-resizable-iframe {
position:absolute;
min-width: 100%;
margin: 0px auto;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments