CODEWITHSUNDEEP
htmlcssvideobrowserresize
Lateral
Lateral

Reputation: 61

Background video that resizes to always fit the browser

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>

Upvotes: 6

Views: 28992

Answers (4)

Nhật Nam
Nhật Nam

Reputation: 41

Use object-fit: cover in the container

Upvotes: 4

Tun&#231; Polat
Tun&#231; Polat

Reputation: 1

I found this:

http://wesbos.com/css-object-fit/

Use object-fit: cover; on your video tag

It worked for me.

Upvotes: 0

shakyjake
shakyjake

Reputation: 377

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

}

Upvotes: 3

cutoverRooster
cutoverRooster

Reputation: 202

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>

Upvotes: 8

Related Questions