Nightmare Prom Memories

    lazy-youtube-embed

    1.0.1 • Public • Published

    lazy-youtube-embed

    GitHub GitHub package.json version

    A fast, lightweight, lazy load, progressive enhancement YouTube embed. 🤯

    • NO DEPENDENCIES.
    • Progressive enhancement: Uses the a tag instead div or custom element. Older or javascript disabled browsers can go to YouTube anyway.
    • Lazy load: Load the video thumbnail using IntersectionObserver API.
    • The quality of the thumbnail is decided using Network Information API.

    Install

    $ npm install --save lazy-youtube-embed
    

    Then with a module bundler like rollup or webpack, use as you would anything else:

    // Using ES6 module
    import lazyYoutubeEmbed from 'lazy-youtube-embed'
    

    Or via CDN with script tag

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/logico/lazy-youtube-embed/dist/lazy-youtube-embed.css" />
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazy-youtube-embed@1.0.0/dist/lazy-youtube-embed.js" defer></script>
    

    Usage

    In HTML add an a tag with the source to the YouTube video and lazy-youtube-embed class:

    <a href="https://youtu.be/3vBwRfQbXkg" class="lazy-youtube-embed">HOW TO FUNK IN TWO MINUTES</a>
    

    lazy-youtube-embed must run after the DOM is loaded.

    Comparison

    These are

    Standard <iframe> YouTube embed.

    TEST IFRAME

    iframe

    Using srcdoc technique css-tricks.

    TEST SRCDOC

    iframe

    Using Lite YouTube Embed repo.

    TEST LITE-YOUTUBE-EMBED

    lite-youtube-embed

    Using Lazy YouTube Embed.

    TEST LAZY-YOUTUBE-EMBED

    lite-youtube-embed

    Install

    npm i lazy-youtube-embed

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    9.79 kB

    Total Files

    5

    Last publish

    Collaborators

    • logico-dev