Easy Tiny iFrame Lightbox In Pure JavaScript – Iframe-Lightbox

Preview:

Description:

Iframe-Lightbox is a simple, lightweight JavaScript library that provides a responsive, customizable, touch-enabled lightbox for iframe content, e.g. Youtube and Vimeo video players.

More features:

• Loading spinner.
• Custom aspect ratio.

Installation:

# NPM
$ npm install iframe-lightbox
# Bower
$ bower install iframe-lightbox

How to use it:

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 trigger link and specify the URL to be loaded in the iframe lightbox uisng ‘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 done.

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

You’re also allowed to set the bottom space using ‘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 available:

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
     }
   });
}

Changelog:

04/10/2021

• v0.2.10

11/22/2020

• Refactor

v0.2.8 (12/23/2018)

• Fixed body scroll disabling on lightbox open

v0.2.8 (12/23/2018)

• Fixed body scroll disabling on lightbox open

v0.2.6 (12/21/2018)

• Fixed CSS minification

v0.2.5 (12/20/2018)

• Added touch events support

v0.2.4 (12/18/2018)

• Reorginized the file tree of the library

v0.2.3 (12/18/2018)

• Changed data-src (which is still supported for compatibility) to href as the source for iframe content

v0.2.2 (12/16/2018)

• Added data-scrolling=”true”, an alternative to existing scrolling option property with true

v0.2.0 (12/16/2018)

• Changed z-index 999999 to play well with wp-admin
• Pure CSS Retina Ready UI images, no external ones, removed inlined SVG and base64 images

v0.1.9 (12/16/2018)

• fix background when iframe is active

v0.1.8 (12/15/2018)

• Added Close button
• Closes on ESC
• Added scrolling option

v0.1.7 (06/02/2018)

• Added onClosed callback option