Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo
data-padding-bottom
attributerate
property of options object
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
https://unpkg.com/iframe-lightbox@latest/iframe-lightbox.js
https://unpkg.com/iframe-lightbox@latest/iframe-lightbox.css
npm install iframe-lightbox
bower install iframe-lightbox
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.
<a
class="iframe-lightbox-link"
href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
data-padding-bottom="56.25%">YouTube</a>
<a
class="iframe-lightbox-link"
href="https://player.vimeo.com/video/165424115?autoplay=false"
data-padding-bottom="56.25%">Vimeo</a>
<a
class="iframe-lightbox-link"
href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/317031598&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"
data-padding-bottom="166px">SoundCloud</a>
<a
class="iframe-lightbox-link"
href="https://audiomack.com/embed/song/bottomfeedermusic/no-shame-explicit"
data-padding-bottom="252px">Audiomack</a>
<a
class="iframe-lightbox-link"
href="https://www.w3.org/"
data-scrolling="true">Scrollable content</a>
[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
el.lightbox = new IframeLightbox(el);
});
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.
(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);
Inspired by squeral/lightbox
Available under MIT License