How do I change this to fill the screen?
<video id="player" width="1280" height="720" controls autoplay></video>

To make the video fill the entire browser window, remove the fixed width and height attributes and use CSS instead:

HTML

<video id="player" controls autoplay></video>

<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#player {
width: 100vw;
height: 100vh;
object-fit: cover; /* fills screen, may crop edges */
}
</style>
_________________________________________

If you want the entire video visible without cropping, use:

CSS
#player {
width: 100vw;
height: 100vh;
object-fit: contain; /* black bars may appear */
}

Or, if you'd like the user to be able to switch to true fullscreen mode with JavaScript:

HTML
<button onclick="document.getElementById('player').requestFullscreen()">
Full Screen
</button>

If this is a video stream from JavaScript (WebRTC, HLS, camera feed, etc.), I can also show you how to make it automatically enter fullscreen on a mobile device or resize to fit its parent container.

0 Comments