Responsive Youtube/Vimeo Video Lightbox With Vanilla JavaScript – MediaBox

Preview:

Description:

MediaBox is an easy and lightweight vanilla JavaScript library which displays and plays Youtube or Vimeo videos in a fullscreen, responsive, modal-like lightbox popup.

How to use it:

Load the mediabox.css in the header to provide the primary CSS styles for the video lightbox.

<link href="dist/mediabox.css" rel="stylesheet">

Add Youtbe and Vimeo video links to your webpage.

<a href="https://www.youtube.com/watch?v=kzYQxZPZtNM" class="mediabox"><img src="https://img.youtube.com/vi/kzYQxZPZtNM/sddefault.jpg"></a>
<a href="https://vimeo.com/71495477" class="mediabox"><img src="https://i.vimeocdn.com/video/445086363_640.jpg"></a>

Load the mediabox.js at the end of the document.

<script src="dist/mediabox.js"></script>

Initialize the MediaBox.

MediaBox('.mediabox');

Changelog:

v1.1.3 (12/02/2018)

• Embed params now customizable

08/14/2018

• fix tabbing, lock into mediabox, tab to close span and enter keypress enabled, remove scroll when fullscreen, fix outside click exiting from mediabox view