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

<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

.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!

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

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

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 or Twitter