Background video that resizes to always fit the browser

html css video browser resize

24,161

Solution 1

You will need to have a container div, which fits to the screen, and then add a class to the video which will resize it to width or height.

CSS:

.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}

.videoPlayer {
    min-height: 100%;
    //min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}

HTML:

<div class="container"><video class="videoPlayer">Code goes here</video></div>

Solution 2

Use object-fit: cover in the container

Solution 3

Oldie but a goldie. Have been struggling with this myself but found that aspect-ratio media queries do the job nicely.

If media queries aren't supported, the video will still cover the page but won't scale properly.

If translateX, translateY or @supports isn't supported, the video won't be centered.

HTML:

<div class="cover">

    <video autoplay loop mute poster="path/to/image.jpg">
        <source src="path/to/video.mp4" type="video/mp4" />
        <source src="path/to/video.webm" type="video/webm" />
        <source src="path/to/video.ogv" type="video/ogg" />
        <img src="path/to/image.jpg" alt="" />
    </video>

</div>

CSS:

.cover {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.cover img, .cover video {
    display: block;
    height: auto;
    left: auto;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    right: auto;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 1;
}

@supports (transform: translateX(-50%)) {

    .cover img, .cover video {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

}

@media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */

    .cover img, .cover video {
        max-width: 100vw;
        min-width: 100vw;
        width: 100vw;
    }

}

@media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */

    .cover img, .cover video {
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
    }

}

24,161

Author by

Admin

Updated on July 09, 2022

Comments

Admin almost 2 years
I'm trying to create a website in which the background is a video. I've been searching for days on how to recreate something like Spotify's homepage background but cannot seem to make it work.

My problem is that I can either get the height to scale with the browser, or the width, but not both. Unlike the video on Spotify's website, it doesn't scale to fit the browser at all times. I've tried many things, and most of them I can't remember. I don't mind using JQuery to achieve this effect.

My current code is:
```
<!DOCTYPE html>
<html>
<head>
<title>VideoBG</title>
<style type="text/css">


#videohome {
    position:absolute; 
    height: 100%;
    width: 100%;

    top:0;  
    left:0;  
    right:0;  
    bottom:0;
}

</style>
</head>
<body>


        <video  id="videohome"  preload="auto" autoplay="true" loop="loop" muted="" volume="0">
            <source src="./homepage.mp4" type="video/mp4" />
        </video>


</body>
</html>
```
Steve Davis over 6 years

It should be noted that as of the time of this writing Edge still doesn't fully support object-fit. It only supports using it on <img> tags. caniuse.com/#search=objectfit
pjk_ok over 6 years

As per the above comment object-fit works in all browsers for video, except for IE and Edge. You can up-vote it on the Microsoft Developer forum here: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/… Use a JS polyfill in the meantime, but if it gets more votes it will be implemented.