Menu
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
451
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
All you need to do is set the width to 100% and the height to auto. This will create a video that fills the entire parent and its height will be calculated automatically based on the width so that it maintains its current aspect ratio no matter the screen size.
Use object-fit css property, though there is no support for IE, but it's still quite reasonable to be used for <video>, <img> tags.
Check CanIUse for Browser Support, and CSS-Tricks for usage.
Example:
/** If parent has some defined width/height */ .video-element { width: 100%; height: 100%; object-fit: cover; } You can use a solution like this one. Ratio dont change, but you may lose the right part of the video.
video#bgvid { position: absolute; z-index: 0; background: url(mel.jpg) no-repeat; background-size: 100% 100%; top: 0px; left: 0px; /* fixed to left. Replace it by right if you want.*/ min-width: 100%; min-height: 100%; width: auto; height: auto; } The video will be fix to top left corner. If you want to improve it, I think you will need some JavaScript.
Edit :
Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video> or <img>
Demo
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
