I am tying to have a video tag to fill 100% of a div:
a) it doesn't need to keep the ratios(otherwise we need to use the overflow:none);
b) fill a div, not the whole background;
c) it would be a plus to be responsible. Now it is as long as you re-size window diagonally. Keeping height and re-sizing horizontally cuts the video.
I have tried dozens if not hundreds of alternative, and all of them keep the initial video ratio.
it works in the fidlle .... maybe because the screen is small, maybe because fiddle is a better browser...
<body>
<div class="wrapper">
<div class="header">
.....
</div>
<div class="out-video">
<video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
<source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
<source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
</video>
</div>
</div>
The site is here but as I try the solutions, it will change... There is a right and left sidebar empty. I would like the video to fill the whole width. When it covers the div, the height change and the video does not show in full. I would like something like the background-size 100% 100% that stretches the images to the end of the div, but it does not work for video.
Thank you for any suggestion in advance.
PS. It seems that android family does not play the video!
l
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
