How to make a video fill the available viewport

Question

I have a video embedded on an HTML page like this:

<div id="contentVideo">
  <video id="video" controls autoplay preload="auto" type="video/mp4" src=<?php echo $url; ?>">
</div>

and this CSS

#video {
  width:100vw;
  height:100vh;
}

I have tried also

#video {
  width:100%;
  height:100%;
}

This video's data is read by PHP and dumped on the page, so the user will not see the video's URL.

That works fine, except for two problems:

The video will not autoplay on safari
The video fills a gigantic size but I want it to fill just the size of the browser.

I explain: the video is HD. Suppose the user is seen that page on a browser window that has no more of 1000x500 pixels. I want the video to scale to fit on the available window, not to display at its original size.

How do I do that with CSS/JavaScript keeping the video proportion, in a way that the video rescales if the window changes size?

Does this answer your question? [Html5 Full screen video](https://stackoverflow.com/questions/6039909/html5-full-screen-video) — imvain2, May 21 '20 at 22:22

score 2 · Answer 1 · answered May 21 '20 at 22:23

2

To answer your first question, I'll link similiar question on stackoverflow: Video auto play is not working in Safari and Chrome desktop browser - you have to add muted attribute to video

Second part: you can use CSS property object-fit: cover on your video element (https://www.w3schools.com/css/css3_object-fit.asp) - works in all modern browsers except for IE (so it works in all modern browsers). So your css should look like:

#video {
  width:100vw;
  height:100vh;
  object-fit: cover;
}

answered May 21 '20 at 22:23

Furman

2,017
3
25
43

`object-fit` not working for me. Unfortunately I cannot have the video muted. The problem is that it autoplays with audio on chrome. – Duck May 21 '20 at 22:27
Please post an example somewhere (JsFiddle/JsBin)? – Furman May 21 '20 at 22:28
It will not autoplay on Chrome mobile, or any mobile device without the muted tag. On Chrome desktop - there are customer specific semantics that dictate autoplay (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes). make sure it plays in an incognito tab (or another device running Chrome). Juts having pressed play inthe past on your page is enough for it to autoplay. – Doug Sillars May 23 '20 at 17:11

CanUver · Accepted Answer · 2020-05-21T22:27:09.410

you can try to resolve this by using media query using css. here is the point. you should set the # media-container in whatever sizes you want it to look like. with the media query s I have provided, you can set which #media-container should look like what size. you can also use object-fit : cover;. So you can get a video that is responsive by size.

 // Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

 }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

also, if you want to adjust the size for the video container and always show the size of the video you put in it, you might be interested in this feature. : Aspect ratio container : https://css-tricks.com/aspect-ratio-boxes/

note: it doesn't seem like you need to use javascript for this situation.

Good luck!

How to make a video fill the available viewport

2 Answers2