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

100

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,519
3
11
9

5

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 33 · Answer 2 · answered Oct 16 '17 at 14:33

33

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

16,616
4
47
54

score 30 · Answer 3 · edited Jan 20 '21 at 19:32

30

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,278
2
28
41

answered May 28 '18 at 09:30

hussein sayed

309
3
2

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 23 · Answer 4 · answered Nov 21 '13 at 18:01

23

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,740
1
10
21

2

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

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

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 10 · 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 5 · Answer 7 · 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 5 · Answer 8 · 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 4 · Answer 9 · 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 10 · 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 2 · Answer 11 · answered Sep 06 '21 at 12:38

2

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

480
4
15

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

366
1
3
17

score -2 · Answer 14 · 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

14 Answers14

Linked