# iframe-lightbox > Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo Latest version **0.2.12** (published 2025-04-01) · (MIT) license · 0 weekly downloads ## Install ```sh npm install iframe-lightbox pnpm add iframe-lightbox yarn add iframe-lightbox bun add iframe-lightbox ``` ## Health **Score 25/100 (F)** — status: maintenance-mode. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.12 | | Published | 2025-04-01 | | First published | 2017-05-28 | | Weekly downloads | 0 | | License | (MIT) | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 33.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 32 | | Author | englishextra | | Maintainers | englishextra | | Keywords | lightbox, vanilla-javascript, vanilla-js, css, js, html, front-end, frontend, pwa, webapp, website, ui, browser, iframe, no-jquery, no-dependencies, no-framework, youtube, vimeo, soundcloud, audiomack | ## Links - npm: https://www.npmjs.com/package/iframe-lightbox - Repository: https://github.com/englishextra/iframe-lightbox - Homepage: https://github.com/englishextra/iframe-lightbox#readme - Issues: https://github.com/englishextra/iframe-lightbox/issues - npm.io page: https://npm.io/package/iframe-lightbox ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 0.2.12 (latest) — 2025-04-01 - 0.2.11 — 2021-10-03 - 0.2.10 — 2021-04-09 - 0.2.9 — 2021-01-17 - 0.2.8 — 2018-12-22 - 0.2.7 — 2018-12-21 - 0.2.6 — 2018-12-21 - 0.2.5 — 2018-12-20 - 0.2.4 — 2018-12-18 - 0.2.3 — 2018-12-18 - 0.2.2 — 2018-12-16 - 0.2.0 — 2018-12-16 - 0.1.9 — 2018-12-15 - 0.1.8 — 2018-12-14 - 0.1.7 — 2018-05-02 - … 7 more at https://npm.io/package/iframe-lightbox/versions ## README # iframe-lightbox Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo [![npm](https://img.shields.io/npm/v/iframe-lightbox.svg)](https://www.npmjs.com/package/iframe-lightbox) [![Build Status](https://travis-ci.com/englishextra/iframe-lightbox.svg?branch=master)](https://travis-ci.com/englishextra/iframe-lightbox) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/369642c14d3344bebe134c76f0f5dde8)](https://www.codacy.com/manual/englishextra/iframe-lightbox/dashboard?utm_source=github.com&utm_medium=referral&utm_content=englishextra/iframe-lightbox&utm_campaign=Badge_Grade) [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/iframe-lightbox/badge)](https://www.jsdelivr.com/package/npm/iframe-lightbox) ## Demo [codepen](https://codepen.io/englishextra/full/jmjayV/) [jsfiddle](https://fiddle.jshell.net/englishextra/8pzy6uhr/show/) [jsbin](https://output.jsbin.com/saqine) ## 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/js/iframe-lightbox.min.js` `https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/css/iframe-lightbox.min.css` ### unpkg `https://unpkg.com/iframe-lightbox@latest/js/iframe-lightbox.js` `https://unpkg.com/iframe-lightbox@latest/css/iframe-lightbox.css` ## Install ### npm `npm install iframe-lightbox` ## Setup `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 ```txt 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. ### YouTube ```html YouTube ``` ### Vimeo ```html Vimeo ``` ### SoundCloud ```html SoundCloud ``` ### Audiomack ```html Audiomack ``` ## Scrollable content ```html Scrollable content ``` ## Initialize ```js [].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function (el) { el.lightbox = new IframeLightbox(el); }); ``` ## Tips 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. ## Examples of event handling ```js (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); ``` ## GitHub Inspired by [squeral/lightbox](https://github.com/squeral/lightbox) [englishextra/img-lightbox](https://github.com/englishextra/img-lightbox) ## License Available under [MIT license](https://opensource.org/licenses/MIT). --- _Source: https://npm.io/package/iframe-lightbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._