Responsive video CSS

Question

I'm trying to create a responsive video background that sits below my header (so not entirely fullscreen)

My problem is that I can't manage to figure out the CSS required to have it fill the space, maintain resolution, and resize (without creating gaps) on smaller screens.

Here is a link of the exact effect I'm looking for. http://www.matthewemvintaylor.co.uk/

Please note I do not want to use Video.JS or BigVid.JS as I'm doing lots of ajax stuff with the video source and don't want to have to figure out how to make them all work together.

Here is my html

<header>
    <div class="navigation">
        title
    </div>
</header>

<div class="content">
    <div class="video-wrapper">
        <video id="video-element" autoplay loop>
        </video>
    </div>
</div>

Here is my CSS

.navigation {
    min-height: 100px;
}

Thanks!

Mikey Musch · Accepted Answer · 2015-11-25 04:30:58Z

1

Set the width and the height of the video with a percentage value.
In this case the video is 100% width and height of is container

#video-element{
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width:100%;
height:100%;
}

You can use
object-fit:cover
to increases or decreases the size of the video to fill the box whilst preserving its aspect-ratio.
JSfiddle

edited Nov 25, 2015 at 4:30

Mikey Musch

6093 gold badges8 silver badges22 bronze badges

answered Nov 25, 2015 at 4:15

waytosay

3082 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mikey Musch Over a year ago

Unfortunately this leaves a massive white space below if I make the browser narrow enough

waytosay Over a year ago

This works for me JSfiddle EDIT: just noticed that i gave you the wrong value for object-fit. it is not contain, it is cover

Mikey Musch Over a year ago

And a few more attributes like position, top, and left and it worked! Thanks!

Collectives™ on Stack Overflow

Responsive video CSS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related