jQuery

Install

Download and install this package with one of the following options.

npm install @iframe-resizer/jquery --save

yarn add @iframe-resizer/jquery

pnpm add @iframe-resizer/jquery

<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/jquery"></script>

You will also need to ensure that the @iframe-resizer/child package has been loaded into the iframe.

Usage

Use jQuery to find the iframes on the page and then pass them to the iframeResize() method. The plugin will automatically filter out any non-iframe elements returned by jQuery.

<script src="/node_modules/jquery/jquery.js"></script>
<script src="/node_modules/iframe-resizer/jquery/index.umd.js"></script>
<script>
  $('iframe').iframeResize({ license: 'xxxx' });
</script>

You can pass any of the standard Parent API options and events via this plugin.

For open source projects, iframe-resizer is free to use under the Gnu Public License. To confirm that you are using it in an open-souce project set the license option to GPLv3.

iframeResize({ license: 'GPLv3' })

Child page

You will then need to install the @iframe-resizer/child package on the page in the iframe.

Once everything is setup, keep an eye on the browser console, as iframe-resizer will warn about any potential issues it detects and provide advice on how to fix them. For more details on using iframe-resizer see the Performance and Trouble Shooting sections of this guide.