Vanilla JavaScript Fullscreen Video

— 10 minute read

Recently I had to make sure a video would pop-up to full screen without having any controls.

So what we are trying to achieve is to have a custom button so we can make our video expand to fullscreen.

HTML Structure permalink

<div id="video-container" class="container">
<div class="btn" id="fullscreen">
Fullscreen
</div>
<video width="400" autoplay playsinline>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4"
/>

Your browser does not support HTML5 video.
</video>
</div>

We start with a container, and this time it's not just for entering, we are going to use the container to mimic the fullscreen effect for iOS devices.

We then add a button to go Fullscreen.

And add the HTML5 Video element, we set it to autoplay which will make it play automatically and playsinline to indicate it's playing inlined.

CSS Markup for HTML5 Video permalink

.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
}
.container.fullscreen {
width: 100%;
height: 100%;
background: #000;
position: fixed;
top: 0px;
left: 0px;
}
.container .btn {
background: #c1666b;
color: #fff;
padding: 10px 20px;
border-radius: 10px;
margin-bottom: 20px;
cursor: pointer;
}

Nothing really fancy here, we use the container in this CSS file to center the video and button in the page. We learned this centering in CSS Flexbox most easy center vertical and horizontal.

Next we add a fullscreen class, this is just to mimic fullscreen mode on iOS which does not support programmatic fullscreen 😭.

And we add some basic styling to the button.

Vanilla JavaScript for going Fullscreen! permalink

document.addEventListener('click', function(event) {
if (!event.target.matches('.btn')) return;

event.preventDefault();

var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if (fullscreenElement) {
exitFullscreen();
} else {
launchIntoFullscreen(document.getElementById('video-container'));
}
});

function launchIntoFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
element.classList.toggle('fullscreen');
}
}

function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

Let's walk through this in more detail.

document.addEventListener('click', function(event) {
if (!event.target.matches('.btn')) return;

event.preventDefault();
});

We use JavaScript event delegation to bind to all click events that happen. But then return if the element does not have a class of btn.

We then say preventDefault() to stop any default behaviour.

var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if (fullscreenElement) {
exitFullscreen();
} else {
launchIntoFullscreen(document.getElementById('video-container'));
}

No that we know the click we need to check if we already in fullscreen mode. We can use the selectors in the fullscreenElement variable.

If either of those exists we will call the function: exitFullscreen() else we will call the function launchIntoFullscreen().

|| is a operator for or it tells us it must be option 1 or option 2 etc.

function launchIntoFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
element.classList.toggle('fullscreen');
}
}

The launchIntoFullscreen function will use the native video fullscreen functions if they exists, each browser has it's own method that's why we do the if...else statements.

If none of those exists (iOS for example) we do a mimic of fullscreen by toggling the fullscreen class on our video container div.

Learn more about Vanilla JavaScript classList.

function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

The exit function is the opposite of the launch function, it will call the native fullscreen functions for each browser. We don't have to check iOS because it won't ever enter this exit function, it will toggle the fullscreen class.

You can find and play with this demo:

See the Pen Vanilla JavaScript Fullscreen Video by Chris Bongers (@rebelchris) on CodePen.

Browser Support permalink

As mentioned, unfortunately it doesn't work on every browser, hence why we incorporated our nifty mimic function!

Fullscreen browser support

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter