Video 100% width and height

B

15

71

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;
 }

Bickford answered 21/11, 2013 at 17:22 Comment(2)

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. – Petiolate 21/11, 2013 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... – Bickford 21/11, 2013 at 17:57

U

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();

Urtication answered 22/11, 2013 at 16:37 Comment(3)

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. – Spreadeagle 1/6, 2015 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!");}); – Lianaliane 12/10, 2016 at 21:38

seems like jquery, not javascript – Englis 29/8, 2019 at 16:47

D

120

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.

Dumbbell answered 23/9, 2016 at 19:33 Comment(6)

This distorts the video for me. – Leonorleonora 21/7, 2017 at 7:50

Can also use object-fit: contain; (Among other options) – Octave 10/10, 2018 at 20:10

This is simply the best solution! Should be marked as correct! – Gonad 13/2, 2019 at 14:58

Be aware that this solution doesn't work for IE11 or Edge. – Broyles 21/5, 2019 at 15:4

Works for me. Thanks. – Posticous 12/2, 2020 at 15:10

I've used object-fit: cover; for my needs, thanks ! – Tree 17/3, 2022 at 13:4

R

40

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>

Raquel answered 28/5, 2018 at 9:30 Comment(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 – Rifleman 20/1, 2021 at 19:30

Z

37

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.}

Zapateado answered 16/10, 2017 at 14:33 Comment(1)

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. – Imamate 25/8, 2023 at 22:54

H

27

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

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

Hyaena answered 21/11, 2013 at 18:1 Comment(4)

nevertheless, this was the solution I needed ;) thx for that tipp, and no !important was needed here. – Tallman 27/7, 2017 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% – Fabulist 29/3, 2019 at 15:45

After around two hours of experimenting, this did the trick. Thank you so much. – Mobilize 21/1, 2022 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) – Kokand 13/11, 2022 at 18:42

U

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();

Urtication answered 22/11, 2013 at 16:37 Comment(3)

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. – Spreadeagle 1/6, 2015 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!");}); – Lianaliane 12/10, 2016 at 21:38

seems like jquery, not javascript – Englis 29/8, 2019 at 16:47

C

11

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

Cran answered 13/11, 2015 at 14:21 Comment(0)

I

6

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%;
}

Inorganic answered 7/5, 2020 at 6:59 Comment(0)

I

6

A simple approach would be to change the css as

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

Inception answered 6/9, 2021 at 12:38 Comment(0)

A

4

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%);
}

Anabaptist answered 11/3, 2015 at 14:30 Comment(0)

K

3

<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>

Kaykaya answered 12/6, 2019 at 4:51 Comment(0)

I

2

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%);

Imagism answered 24/4, 2018 at 13:42 Comment(0)

P

0

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>

Perspicuity answered 13/1, 2019 at 13:18 Comment(0)

R

0

use this css for height

height: calc(100vh) !important;

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

Runagate answered 5/5, 2019 at 9:9 Comment(0)

M

0

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.

Metathesis answered 16/3, 2023 at 20:28 Comment(0)

G

-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"

Gales answered 31/7, 2017 at 15:35 Comment(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). – Neglectful 22/1, 2020 at 12:12

Recommended topics

Hot tags