Author: | paulirish |
---|---|
Views Total: | 67 views |
Official Page: | Go to website |
Last Update: | October 5, 2023 |
License: | MIT |
Preview:

Description:
The <lite-youtube /> component makes Youtube video embed much faster than the traditional iframe method.
Lightweight, progressive enhancement, and mobile-friendly. It provides an elegant way to lazy load Youtube videos to save the bandwidth and improve the page load speed.
How to use it:
1. Download and import the lite-youtube.js library into the document.
<link rel="stylesheet" href="lite-yt-embed.css" /> <script src="lite-yt-embed.js"></script>
2. Insert the lite-youtube component into the document and override the video ID:
<lite-youtube data-videoid="z3uOX1Q3Lco"></lite-youtube>
3. For maximum progressive enhancement, output this HTML and lazily register the component:
<lite-youtube videoid="VIDEO ID HERE" style="background-image: url('https://i.ytimg.com/vi/VIDEO ID HERE/hqdefault.jpg');"> <a href="https://youtube.com/watch?v=VIDEO ID HERE" class="lty-playbtn" title="Play Video"> <span class="lyt-visually-hidden">Play Video</span> </a> </lite-youtube>
4. Pass custom player parameters.
<lite-youtube videoid="VIDEO ID HERE" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>
5. Customize the styles of the Youtube video player.
lite-youtube { width: 560px; height: 315px; background-color: #000; position: relative; contain: strict; display: block; background-position: center center; background-size: cover; cursor: pointer; } /* gradient */ lite-youtube::before { content: ''; display: block; position: absolute; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-position: top; background-repeat: repeat-x; height: 60px; padding-bottom: 50px; width: 100%; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } /* play button */ lite-youtube .lty-playbtn { width: 70px; height: 46px; background-color: #212121; z-index: 1; opacity: 0.8; border-radius: 14%; /* TODO: Consider replacing this with YT's actual svg. Eh. */ transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } lite-youtube:hover .lty-playbtn { background-color: #f00; opacity: 1; } /* play button triangle */ lite-youtube .lty-playbtn:before { content: ''; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; } lite-youtube .lty-playbtn, lite-youtube .lty-playbtn:before { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } /* Post-click styles */ lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated .lty-playbtn { opacity: 0; pointer-events: none; }
Changelog:
v0.3.0 (10/05/2023)
- lite-yt-embed now uses the YouTube Player API to force autoplay
- Fix duplicate iframes being created
- Actually use progressive enhancement with a link rather than button
- remove version=”1.1″ from SVG (not needed)
- remove poster image preload
- Remove href from button to prevent possible navigation
2019-11-19
- responsive CSS with 16:9 aspect ratio and width:100%