<lite-iframe/> - A web component which enhances UX by lazy loading iframes and providing a ...

<lite-iframe />

A web component which enhances user experience by lazy loading iframes and providing a better fallback user interface

View Demo · Report Bug · Request Feature

About The Project

Built With

• Web Components
• Typescript

Getting Started

To get a local copy up and running follow these simple steps.

1. Install NPM packages

npm install lite-iframe

2. Include the lite-iframe component file in your project root.

import 'lite-iframe';

OR

1. You can include unpkg CDN link in the project file.

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

Usage

You can use lite-iframe like normal iframe.

<!-- Codepen -->
<lite-iframe
  scrolling="no"
  title="Piccalilli CSS Utility — Issue  #2 — Full bleed utility"
  src="//codepen.io/andybelldesign/embed/Nmxrwv/?height=300&theme-id=dark&default-tab=css,result"
  frameborder="no"
  allowtransparency="true"
  allowfullscreen="true"
>
</lite-iframe>

<!-- Youtube -->
<lite-iframe
  type="youtube"
  src="https://www.youtube.com/embed/lzQyH-nX0u0"
></lite-iframe>

For live example, please see the demo

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated .

git checkout -b feature/AmazingFeature
git commit -m 'Add some AmazingFeature'
git push origin feature/AmazingFeature

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Annamalai Saravanan - @asvny_

Project Link: https://github.com/asvny/lite-iframe

Acknowledgements

• https://github.com/paulirish/lite-youtube-embed/
• https://github.com/luwes/lite-vimeo-embed