Fluid Iframe
Allows iframes to scale down while maintaining its original aspect ratio. This is most useful for iframes authors paste into a rich-text WYSIWYG field. Managed iframes whose markup can be controlled directly (e.g. shortcodes) can achieve this with just HTML and CSS.
Inspired by FitVids.js and noframe.js.
Install
yarn add @threespot/fluid-iframe
Usage
import FluidIframe from "@threespot/fluid-iframe";
const iframes = document.querySelectorAll("iframe");
iframes.forEach(el => new FluidIframe(el));
// Using a class instead of inline styles
iframes.forEach(el => new FluidIframe(el, {
inlineStyles: false,
classes: "video-wide"
}));
// Adding styles directly to the iframe with no wrapper
// (mean iframe won’t be able to expand beyond its original size)
iframes.forEach(el => new FluidIframe(el, { wrap: false }));
Here’s an example of how to use CSS instead of inline styles (requires wrapper around iframe):
// wrapper div around the iframe
.video-wide {
position: relative;
&:before {
content: '';
display: block;
padding-top: percentage(9/16);
}
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
Options
These options can also be set in JavaScript:
new FluidFrame(el, {
defaultAspectRatio: 9 / 16,
forceRatio: false,// set aspect ratio to use regardless of actual dimensions of iframe
inlineStyles: true,// apply inline styles to wrapper or iframe (depends on wrap option)
wrap: true,// adds a div wrapper around the iframe
classes: "" // class(es) to add to the wrapper or iframe (depends on wrap option)
});
License
This is free software and may be redistributed under the terms of the MIT license.
About Threespot
Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at https://www.threespot.com.