https://github.com/jgw96/lazy-iframe
Lazy load iframes using web components! #usetheplatform
https://github.com/jgw96/lazy-iframe
Last synced: 3 months ago
JSON representation
Lazy load iframes using web components! #usetheplatform
- Host: GitHub
- URL: https://github.com/jgw96/lazy-iframe
- Owner: jgw96
- License: mit
- Created: 2017-10-04T18:55:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-04T19:06:28.000Z (about 8 years ago)
- Last Synced: 2025-06-21T01:51:29.862Z (4 months ago)
- Language: JavaScript
- Size: 152 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - Lazy Iframe
README
# 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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 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
```
```
### Script tag
- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
- Put a this script tag `` 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 `