Responsive No-jQuery Pure JS / CSS Lightbox for iframes

iframe lightbox Responsive no-jQuery Pure JS / CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5 KB non-minimized source code, with the demo.

Iframe-Lightbox is a simple and lightweight JavaScript library that provides a streamlined, responsive, customizable, and touch-enabled rendering of iframe content, for example, Youtube and Vimeo video players.

jquery iframe modal popup, open iframe video in lightbox, pure javascript modal, vanilla js lightbox, iframe lightbox wordpress, javascript lightbox

How to make use of it:

Installation:

# NPM
$ npm install iframe-lightbox

# Bower
$ bower install iframe-lightbox

Add the Iframe-Lightbox’s JavaScript and CSS files to the HTML file.

<link rel="stylesheet" href="iframe-lightbox.css">
<script src="iframe-lightbox.js"></script>

Create a set off-link and specify the URL to be loaded within the iframe lightbox using ‘href’ attributes as follows:

<a href="javascript:void(0);"
   class="iframe-lightbox-link"
   href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
   >
   YouTube
</a>

<a href="javascript:void(0);"
   class="iframe-lightbox-link"
   href="https://player.vimeo.com/video/28629415?autoplay=false"
   >
   Vimeo
</a>

...

Initialize the iframe lightbox and we’re executed.

[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
  el.lightbox = new IframeLightbox(el);
});

You’re additionally allowed to set the bottom area utilizing ‘data-padding-bottom’ attribute:

<a href="javascript:void(0);"
   class="iframe-lightbox-link"
   href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
   data-padding-bottom="56.25%"
   >
   YouTube
</a>

Event handlers accessible:

document.getElementsByClassName("iframe-lightbox-link"), function (el) {
   el.lightbox = new IframeLightbox(el, {
     onLoaded: function (iframe) {
      // on loaded
     },
     onCreated: function (instance) {
      // on created
     },
     onOpened: function (instance) {
      // on opened
     },
     onClosed: function (instance) {
      // on closed
     }
   });
}

Easy Tiny iFrame Lightbox, iframe-lightbox Plugin/Github, lightweight lightbox, lightbox vs iframe

See Demo And Download

Official Website(englishextra): Click Here

This superior jQuery/javascript plugin is developed by englishextra. For extra Advanced Usages, please go to the official website.