Vanilla JavaScript Fullscreen Video
Tags: javascript
Published: 2020-04-22 06:07:28

---
title: Vanilla JavaScript Fullscreen Video
published: true
date: 2020-04-22 03:00:00 UTC
tags: javascript
canonical_url: https://daily-dev-tips.com/posts/vanilla-javascript-fullscreen-video/
---

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

```html
<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

```css
.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](https://daily-dev-tips.com/posts/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!

```js
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.

```js
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.

```js
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.

```js
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](https://daily-dev-tips.com/posts/vanilla-javascript-classlist/).

```js
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:

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="OJyRqzG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript Fullscreen Video">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/OJyRqzG">
  Vanilla JavaScript Fullscreen Video</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

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

![Fullscreen browser support](https://caniuse.bitsofco.de/image/fullscreen.png)

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

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)