Open Iframe Resizer

Overview

A modern, lightweight alternative for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.

If you found this plugin helpful, please consider starring the repository!

Getting Started

Browser (ES6 modules)

<script type="module">
  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js";

  initialize({}, "#my-iframe");
</script>

You can found a working example here

Package

Note you can also install the core package through npm:

npm install @open-iframe-resizer/core

React

A React component is also available:

npm install @open-iframe-resizer/react

Notes

Comparison with iframe-resizer

This library is very good, but it has changed its license, so it is no longer usable in closed-source projects for free. I decided to replicate some parts of the API, as it may facilitate migration to this project.

Some features from this library are missing, but they could be implemented in future versions.

Resize iframes from a different origin

• If you have control over the embedded page, you need to load the script on your child page to enable messaging between the two windows (you do not need to call the initialize function in the child; loading the module is sufficient).

• If you have no control over the child iframe domain, and, by chance, the child page loads the legacy iframe-resizer script, you can initialize the library with the compatibility mode; it will try to connect to the child iframe:

initialize({ enableLegacyLibSupport: true }, "#my-iframe");

Browser support

| Chrome | Safari | Firefox | Opera | IE | |--------|--------|---------|-------|-----------| | 64+ | 13.1+ | 69+ | 51+ | 🙅‍♂️ |