Video 100% width and height

Question

I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.

Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn't matter.

HTML:

    <video preload="auto" class="videot" id="videot" height="100%" preload>
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
    <object data="BESTANDEN/video/tible.mp4" height="1080">
        <param name="wmode" value="transparent">
        <param name="autoplay" value="false" >
        <param name="loop" value="false" >
    </object>

CSS:

 .videof, .videot {
    width: 100%    !important;
    height: 100%   !important;
 }

Try using `max-width` and `max-height` instead. By setting the `width` and `height` to 100%, you might be stretching the video to fit those exact dimensions. — Scott, Nov 21 '13 at 17:38
I used min-width and min-height instead, because max-height and width didn't work. But now the video is full screen, but there is still a max on the width; the video size. And It won't become bigger... — Milan, Nov 21 '13 at 17:57

Leo Yu · Answer 1 · 2016-10-14T15:38:30.060

111

By checking other answers, I used object-fit in CSS:

video {
    object-fit: fill;
}

From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Value: fill

The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.

edited Oct 14 '16 at 15:38

answered Sep 23 '16 at 19:33

Leo Yu

2,727
3
12
9

6

This distorts the video for me. – silvenon Jul 21 '17 at 07:50
2

Can also use `object-fit: contain;` (Among other options) – rebelzach Oct 10 '18 at 20:10
1

This is simply the best solution! Should be marked as correct! – Keenora Fluffball Feb 13 '19 at 14:58
1

Be aware that this solution doesn't work for IE11 or Edge. – Dan Abrey May 21 '19 at 15:04
Works for me. Thanks. – yala ramesh Feb 12 '20 at 15:10
I've used object-fit: cover; for my needs, thanks ! – PalmThreeStudio Mar 17 '22 at 13:04

score 39 · Answer 2 · edited Jan 20 '21 at 19:32

39

Easiest & Responsive.

<video src="full.mp4" autoplay muted loop></video>

<style>
    video {
        height: 100vh;
        width: 100%;
        object-fit: fill; // use "cover" to avoid distortion
        position: absolute;
    }
</style>

edited Jan 20 '21 at 19:32

tmarois

2,424
2
31
43

answered May 28 '18 at 09:30

hussein sayed

399
3
2

1

This is the correct answer. As for actually filling 100% of both width and height. If you dont want distortion of video, use `object-fit:cover` instead.. but this is correct. no js needed, pure css – tmarois Jan 20 '21 at 19:30

score 36 · Answer 3 · answered Oct 16 '17 at 14:33

36

If you're looking for the equivalent to background-size: cover for video.

video {
  object-fit: cover;
}

This will fill the container without distorting the video.

^{PS: I'm extending on Leo Yu's answer here.}

answered Oct 16 '17 at 14:33

Fabian Schultz

18,138
5
49
56

You're not extending Leo Yu's answer. You're giving the correct answer. That answer distorts the video if the viewport size does not have exactly the same ratio as the video, whereas your answer crops the video without distorting it. I can't think of any case where a professional website would want a distorted background video, so your answer is far more useful. I'd remove that remark if I were you. – tao Aug 25 '23 at 22:54

score 27 · Answer 4 · answered Nov 21 '13 at 18:01

27

video {
  width: 100%    !important;
  height: auto   !important;
}

Take a look here http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

answered Nov 21 '13 at 18:01

JerryHuang.me

1,790
1
11
21

3

nevertheless, this was the solution I needed ;) thx for that tipp, and no !important was needed here. – ggzone Jul 27 '17 at 10:18
One tip: add `object-fit: fill;` to the `video` tag. It will scretch to 100%. And keep width and height at 100% – kpuccino Mar 29 '19 at 15:45
After around two hours of experimenting, this did the trick. Thank you so much. – Shinigami Jan 21 '22 at 10:20
This answer, but I prefer `max-width` as it will contain large videos, but not distort low resolution ones (been working with a lot of archives lately) – Jefferey Cave Nov 13 '22 at 18:42

score 16 · Accepted Answer · answered Nov 22 '13 at 16:37

16

You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.

http://jsfiddle.net/RfV5C/

var $video  = $('video'),
    $window = $(window); 

$(window).resize(function(){
    var height = $window.height();
    $video.css('height', height);

    var videoWidth = $video.width(),
        windowWidth = $window.width(),
    marginLeftAdjust =   (windowWidth - videoWidth) / 2;

    $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
    });
}).resize();

answered Nov 22 '13 at 16:37

Gladstone24

318
3
10

1

This does not fill both the width and height, if u enlarge the window size then it leaves whitespace. So not really an acceptable answer to his question. – Chrillewoodz Jun 01 '15 at 10:12
If you resize the window, you need to call a function to change the video size. jQuery: `$( window ).resize(function() { console.log("run resize function again!");});` – duhaime Oct 12 '16 at 21:38
seems like jquery, not javascript – Ewald Bos Aug 29 '19 at 16:47

score 11 · Answer 6 · answered Nov 13 '15 at 14:21

This works for me for video in a div container.

.videoContainer 
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}

.videoContainer video 
{
    min-width: 100%;
    min-height: 100%;
}

Reference: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

score 6 · Answer 7 · answered May 07 '20 at 06:59

Put the video inside a parent div, and set all to 100% width & height with fill of cover. This will ensure the video isn't distorted and ALWAYS fills the div entirely.

.video-wrapper {
    width: 100%;
    height: 100%;
}

.video-wrapper video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

score 6 · Answer 8 · answered Sep 06 '21 at 12:38

6

A simple approach would be to change the css as

.videot {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

answered Sep 06 '21 at 12:38

Arya Anish

578
1
7
18

score 4 · Answer 9 · answered Mar 11 '15 at 14:30

I use JavaScript and CSS to accomplish this. The JS function needs to be called once on init and on window resize. Just tested in Chrome.

HTML:

<video width="1920" height="1080" controls>
    <source src="./assets/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

JavaScript:

function scaleVideo() {
    var vid = document.getElementsByTagName('video')[0];
    var w = window.innerWidth;
    var h = window.innerHeight;

    if (w/16 >= h/9) {
        vid.setAttribute('width', w);
        vid.setAttribute('height', 'auto');
    } else {
        vid.setAttribute('width', 'auto');
        vid.setAttribute('height', h);
    }
}

CSS:

video {
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

score 4 · Answer 10 · answered Jun 12 '19 at 04:51

<style>
    .video{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover}
  }
</style>
<video class= "video""
  disableremoteplayback=""
  mqn-lazyimage-video-no-play=""
  mqn-video-css-triggers="[{&quot;fire_once&quot;: true, &quot;classes&quot;: [&quot;.mqn2-ciu&quot;], &quot;from&quot;: 1, &quot;class&quot;: &quot;mqn2-grid-1--hero-intro-video-meta-visible&quot;}]"
  mqn-video-inview-no-reset="" mqn-video-inview-play="" muted="" playsinline="" autoplay>

<source src="https://github.com/Slender1808/Web-Adobe-XD/raw/master/Home/0013-0140.mp4" type="video/mp4">

</video>

score 2 · Answer 11 · answered Apr 24 '18 at 13:42

This is a great way to make the video fit a banner, you might need to tweak this a little for full screen but should be ok. 100% CSS.

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);

score 0 · Answer 12 · answered Jan 13 '19 at 13:18

We tried with the below code & it works on Samsung TV, Chrome, IE11, Safari...

<!DOCTYPE html>
<html>
<head>
    <title>Video</title>
    <meta charset="utf-8" />
    <style type="text/css" >

        html,body {
          height: 100%;
          text-align: center;
          margin: 0;
          padding:0;
        }

        video {
            width: 100vw; /*100% of horizontal viewport*/
            height:100vh; /*100% of vertical viewport*/
        }

    </style>
</head>
<body>
        <video preload="auto" class="videot" id="videot" preload>
            <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
            <object data="BESTANDEN/video/tible.mp4" height="1080">
                <param name="wmode" value="transparent">
                <param name="autoplay" value="false" >
                <param name="loop" value="false" >
            </object>
        </video>
</body>
</html>

score 0 · Answer 13 · answered May 05 '19 at 09:09

0

use this css for height

height: calc(100vh) !important;

This will make the video to have 100% vertical height available.

answered May 05 '19 at 09:09

Delowar Hossain

375
1
3
19

score 0 · Answer 14 · answered Mar 16 '23 at 20:28

There are other settings that go along with object-fit. i.e. from a full page video:

object-fit: contain; overflow-clip-margin: content-box; overflow: clip; overflow-x: ; overflow-y: ;

You'll need to adjust it for you but maybe there's something there with "overflow-clip-margin" and "overflow:clip" that can further assist you in controlling or setting the clip to get fullscreen.

score -2 · Answer 15 · answered Jul 31 '17 at 15:35

-2

I am new into all of this. Maybe you can just add/change this HTML code. Without need for CSS. It worked for me :)

width="100%" height="height"

answered Jul 31 '17 at 15:35

Keyz

1

Your eagerness to contribute to the community is appreciated but this is just wrong (the height attribute does not take "height" as a valid value). – Dois Jan 22 '20 at 12:12

Video 100% width and height

15 Answers15

Linked