SEB Magic Iframe

Magic iframe

The Magic iframe component adds responsiveness to iframes as well as the ability to listen to events, override styles and show custom loaders when iframe is loading content.

Basic usage


              /* javascript for custom web component (one for legacy browsers and one for browsers that support modules) */

              <script type="module" src="https://unpkg.com/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.esm.js"></script>

              <script nomodule src="https://unpkg.com/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.js"></script>

              

              /* seb-magic-iframe element tag for custom web component */

              <seb-magic-iframe source="/assets/first-page.html"></seb-magic-iframe>

Magic iframe options

Read more about the options and how they can be used in the documentation.

Normal iframe

Normal, boring, old iframe that won't resize or let you know what's happening inside. The height is fixed by default so unless you update it manually it will get scrollbars when iframe content is taller than the iframe.

Usage


            /* nothing special going on here but just as reference, this is how you'd normally add an iframe */

            <iframe src="assets/first-page.html" frameborder="0" style="width: 100%" height="200"></iframe>