Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo
- 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
https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/js/iframe-lightbox.min.js
https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/css/iframe-lightbox.min.css
https://unpkg.com/iframe-lightbox@latest/js/iframe-lightbox.js
https://unpkg.com/iframe-lightbox@latest/css/iframe-lightbox.css
npm install iframe-lightbox
class
is not required. iframe-lightbox-link
is used here to select elements. You may use some other method for elements selection.
data-src
is another method to get the source URL when you do not want the link to lead to some real URL.
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
.
The data-scrolling
is optional, makes iframe content scrollable or not (default); this can be set with scrolling
option property.
For those who don't use 3rd-party scripts that interfere with links behaviour and don't force window.location
they have no need in either data-touch="true"
or {touch: true}
.
When you have scripts that interfere, then to keep lightbox working, use {touch: true}
or data-touch="true"
.
data-src
or href
doesn't matter, but you shouldn't enable this touch override if you have a full screen image in a lighbox link and have no other space to scroll down.
<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/lax/go-low"
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: work-related 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 */,
touch: false /* default: false - use with care for responsive images in links on vertical mobile screens */
});
});
})("undefined" !== typeof window ? window : this, document);
Inspired by squeral/lightbox englishextra/img-lightbox
Available under MIT license.