Fast Youtube Video Embed With lite-youtube Component

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%