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.
- src(string): the src of the asset you want to load in the iframe
- title(string): the title for the iframe
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;
}
<lazy-iframe src='https://www.youtube.com/embed/UfD-k7aHkQE' title='ionic and stencil'></lazy-iframe>
- 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
- 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
- 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