A web component which enhances user experience by lazy loading iframes and providing a better fallback user interface
View Demo
·
Report Bug
·
Request Feature
To get a local copy up and running follow these simple steps.
- Install NPM packages
npm install lite-iframe
- Include the
lite-iframe
component file in your project root.
import 'lite-iframe';
OR
- You can include unpkg CDN link in the project file.
<script
src="https://unpkg.com/[email protected]/dist/lite-iframe.esm.js"
type="module"
></script>
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
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.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Annamalai Saravanan - @asvny_
Project Link: https://github.com/asvny/lite-iframe