Menu
I want to use a 4:3 video as a background on a site. However, setting the width and height to 100% doesn't work since the aspect ratio is kept intact, so the video doesn't fill the whole width of the site.
Here is my HTML and CSS code.
HTML:
<!DOCTYPE HTML> <html land="en"> <head> <link rel="stylesheet" type="text/css" href="html5video.css" /> <title>html 5 video test</title> </head> <body id="index"> <video id="vidtest" autoplay> <source src="data/comp.ogv" type="video/ogg" width="auto" > </video> <div class="cv"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html> CSS:
body { background-color:#000000; } #vidtest { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 200%; height: 100%; z-index: -1000; } .cv { width: 800px; position:relative; text-align:center; margin-top: 100px; color:#FFFFFF; font-family:"Arial"; font-size: 10px; line-height: 2em; text-shadow: 3px 3px 2px #383838; margin-left: auto; margin-right: auto; } 
733
16:9 aspect ratio means height is 9/16 times the width, which comes as 0.5625 or 56.25%. Using this we create a parent container of 16:9 aspect ratio by setting padding-top: 56.25% and height: 0px. The child container which is a <video>, takes the full height and width of the parent.
In order for a video to be responsive, the video should always expand to fill the width of its container while maintaining its original aspect ratio. We want to avoid static sizing that can break page layouts, distort the image, or display black bars around the video.
If we need to show a video of 16:9 aspect ratio, we could create a parent <div> with aspect ratio of 16:9. A child <video> can be created whose height: 100%, width: 100% is set and our work could be done.
And width and height should obviously be such that the aspect ratio of the video is preserved. When you know the screen size, then you can set height and width for the video. The problem comes up in maintaining responsiveness.
If you have a element on the page, this jQuery resizing function will scale the video to be full bleed of the browser window. By changing the browserHeight and browserWidth variables you could have the video scaled to fit a DIV (make sure you set that DIV to overflow:hidden).
If you want the video to fill the size of the <video> element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:
this a really old thread, I know, and what I'm proposing is not necessarily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact
If you want the video to fill the size of the <video> element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:
video { width: 230px; height: 300px; object-fit: cover; } I hope this can be of help for some people.
EDIT: works in most browsers but IE
103
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
