lazy-iframe

lazy-iframe

lazy-iframe is a web component built with stencil that lets you lazy load iframes as the user scrolls over them. It uses the intersectionObserver to achieve this functionality. This can be handy for embedding youtube videos, ads that work through an iframe etc.

API

• src(string): the src of the asset you want to load in the iframe
• title(string): the title for the iframe

Styling

lazy-iframe exposes two css variables to enable easy styling of the iframe. Here is a usage example:

// in your apps css

:root {
  --iframe-width: 100px;
  --iframe-height: 100px;
}

Usage

 <lazy-iframe src='https://www.youtube.com/embed/UfD-k7aHkQE' title='ionic and stencil'></lazy-iframe>

Script tag

• Publish to NPM
• Put a this script tag <script src='https://unpkg.com/lazy-iframe@0.0.3/dist/lazyiframe.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-name --save
• Put a script tag similar to this <script src='node_modules/lazy-iframe/dist/lazyiframe.js></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install lazy-iframe --save
• Add { name: 'lazy-iframe' } to your collections
• Then you can use the element anywhere in your template, JSX, html etc