<lite-iframe/> - A web component which enhances UX by lazy loading iframes...
source link: https://github.com/asvny/lite-iframe
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
<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
Getting Started
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>
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK