iframe-lightbox Demo

Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo

Demo

codepen jsfiddle jsbin

Features

• Simple initialization
• Nicely fits YouTube / Vimeo / SoundCloud / Audiomack or other URL via iframe
• Customizable aspect ratio via data-padding-bottom attribute
• Iframe content can be scrollable or not (default)
• Debounced launch, default 500ms, custom rate can be set with rate property of options object
• Preloading spinner that is unset after onload event succeeds
• Pure CSS Retina Ready UI images, no external ones (prompted by github.com/jasomdotnet, thanks)
• Custom event callbacks

CDN

jsDelivr

https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/iframe-lightbox.min.js
https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/iframe-lightbox.min.css

unpkg

https://unpkg.com/iframe-lightbox@latest/iframe-lightbox.js
https://unpkg.com/iframe-lightbox@latest/iframe-lightbox.css

Install

npm

npm install iframe-lightbox

bower

bower install iframe-lightbox

Setup

class is not required. They are used here to select elements. You may use some other method for elements selection.

data-src is deprecated, but supported for compatibility.

href is required, and contains URL of your content.

data-padding-bottom is optional, and can be used to change default 16/9 Aspect Ratio to the one of yours with the formula: a percentage value of height/width*100.

For instance, HD would be: 9 / 16 * 100 + "%"

So, for YouTube or Vimeo, data-padding-bottom="56.25%" would be enough.

For SoundCloud embedded player via iframe, use: data-padding-bottom="166px"

For Audiomack embedded player via iframe, use: data-padding-bottom="252px"

For Scrollable content set data-scrolling="true", or add scrolling option property with true

data-scrolling is optional, makes iframe content scrollable or not (default); this can be set with scrolling option property.

YouTube

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

Vimeo

<a
class="iframe-lightbox-link"
href="https://player.vimeo.com/video/165424115?autoplay=false"
data-padding-bottom="56.25%">Vimeo</a>

SoundCloud

<a
class="iframe-lightbox-link"
href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/317031598&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"
data-padding-bottom="166px">SoundCloud</a>

Audiomack

<a
class="iframe-lightbox-link"
href="https://audiomack.com/embed/song/bottomfeedermusic/no-shame-explicit"
data-padding-bottom="252px">Audiomack</a>

Scrollable content

<a
class="iframe-lightbox-link"
href="https://www.w3.org/"
data-scrolling="true">Scrollable content</a>

Initialize

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

Tips

SPA / PWA developers don't need to bother: built-in class is added to a link.

That way you avoid multiple assignments to a single element.

Examples of event handling

(function (root, document) {
	"use strict";
	[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function (el) {
		el.lightbox = new IframeLightbox(el, {
				onCreated: function () {
					/* show your preloader */
				},
				onLoaded: function () {
					/* hide your preloader */
				},
				onError: function () {
					/* hide your preloader */
				},
				onClosed: function () {
					/* hide your preloader */
				},
				scrolling: false, /* default: false */
				rate: 500 /* default: 500 */
			});
	});
})("undefined" !== typeof window ? window : this, document);

GitHub

Inspired by squeral/lightbox

englishextra/iframe-lightbox

License

Available under MIT License

Edit in JS Bin