<main>
<section>
<h1>Late-load YouTube videos on demand</h1>
<p>Videos are loaded upon user interaction, not before.</p>
<p>A lightweight, accessible, and very performant, video component / module using HTML5 Custom Elements. Just the background image is loaded until it's showtime.
</p>
</section>
<section>
<h2>Single video</h2>
<yt-l class=vdo-1 hidden videoId=631k3M2Sxe4 videoTitle="Rock & Bowl festival"></yt-l>
</section>
<section class=-fullWidthBlock>
<h2>Multiple videos <span>(in a block)</span></h2>
<!--
Note: This is a list of four list items.
Use a ul, ol, or add roles to divs.
-->
<div class=video_lst role=list>
<!-- Classes are used for layout -->
<yt-l class=vdo-2 hidden role=listitem videoId=vzbXU-MhghA videoTitle="Bat the Dog: Sweet About Me"></yt-l>
<yt-l class=vdo-2 hidden role=listitem videoId=CIqM2oCru5U videoTitle="The Go Nows: Best Laid Plans"></yt-l>
<yt-l class=vdo-2 hidden role=listitem videoId=57hvbJkd_fc videoTitle="Bat the Dog: La Bamba"></yt-l>
<yt-l class=vdo-2 hidden role=listitem videoId=aNjyxudde40 videoTitle="Shalane: Jammin' on the beach"></yt-l>
</div>
</section>
<section>
<h2>Built with WCAG Accessibility in mind</h2>
<ul>
<li>Friendly to keyboard-only users</li>
<li>Accessible names are used throughout</li>
<li>The play button is labelled</li>
<li>The iframe includes a title</li>
<li>Each asset has a heading</li>
<li>Fully responsive</li>
<li>Customisable via CSS variables (Custom Properties)</li>
<li>Smoother transition between static image and video.</li>
</ul>
<h2>Why bother to do this?</h2>
<p>See the well-thought-out article: <a class=-nowrap target=_blank title="[new window]" href="https://lean.codecomputerlove.com/make-your-own-lightweight-youtube-player/">Make YouTube Embeds Load Faster</a> by Moujib Aghrout. His reasoning is very good, though personally I'd use the method presented here.</p>
</section>
<section>
<h2>That beautiful code!</h2>
<p>See the CodePen panels for annotation, this is the production friendly nitty-gritty:</p>
<figure>
<figcaption>HTML single video</figcaption>
<pre><code class=language-markup spellcheck=false contenteditable><yt-l videoId="[youtube-id]" videoTitle="[video-title]"></yt-l></code></pre>
</figure>
<figure>
<figcaption>HTML multiple video block</figcaption>
<pre><code class=language-markup spellcheck=false contenteditable><div role="list">
<yt-l role="listitem" videoId="[youtube-id]" videoTitle="[video-title]"></yt-l>
<yt-l role="listitem" videoId="[youtube-id]" videoTitle="[video-title]"></yt-l>
…
</div></code></pre>
</figure>
<figure>
<figcaption>CSS Custom Properties</figcaption>
<pre><code class=language-css spellcheck=false contenteditable>yt-l {
/* Exposed "globally-scoped" custom properties: */
/* These are the default values */
/* They don't need to be defined, and may be overridden */
--aspectRatio: calc(100% / (16 / 9));
--overlayBgImg: linear-gradient(0, rgba(0,0,0,.4) 6%, rgba(0,0,0,0) 50%, rgba(0,0,0,.4) 100%);
--btnSize: 3rem;
--titleColor: #fff;
--titleBgColor: #000;
--titleFont: 1rem/1 sans-serif;
--titlePadding: .25rem;
}</code></pre>
</figure>
<figure>
<figcaption>JavaScript ES6 <small>[5.22 KB - 2.58 KB gzipped]</small></figcaption>
<pre><code class=language-js spellcheck=false contenteditable>const template=document.createElement('template');template.innerHTML=`<style>:host{--aspectRatio:calc(100% / (16 / 9));--overlayBgImg:linear-gradient(0, rgba(0,0,0,.4) 6%, rgba(0,0,0,0) 50%, rgba(0,0,0,.4) 100%);--btnHeight:3rem;--titleColor:#fff;--titleBgColor:#000;--titleFont:1rem/1 sans-serif;--titlePadding:.25rem;display:block;position:relative;contain:content;cursor:pointer}.ytl::before,.ytl_btn-play,.ytl_svg{position:absolute}.ytl::before{content:'';width:100%;height:100%;background-image:var(--overlayBgImg);transition:opacity .3s ease-out}.ytl:focus-within::before,.ytl:hover::before{opacity:0}.ytl::after{content:"";display:block;padding-bottom:var(--aspectRatio)}.ytl_btn-play::-moz-focus-inner{border:0}.ytl_btn-play{display:block;width:100%;height:100%;background-color:transparent;border:none;padding:0;cursor:pointer}.ytl_svg{display:block;top:50%;left:50%;width:calc(var(--btnHeight) * 1.42);height:var(--btnHeight);transform-origin:50% 50%;z-index:1;transform:translate3d(-50%,-50%,0)}.ytl_iframe,.ytl_title{position:absolute;width:100%}.ytl_path-playBg{fill:hsla(0,0%,0%,.5);transition:fill .3s ease-out}.ytl_btn-play:focus .ytl_path-playBg,.ytl_btn-play:hover .ytl_path-playBg{fill:hsla(0,100%,50%,1);outline:0}.ytl_title{bottom:0;color:var(--titleColor);background-color:var(--titleBgColor);font:var(--titleFont);text-align:center;margin:0;padding:var(--titlePadding);transition:opacity .3s ease-out,visibility 0s ease-out .3s}.ytl_iframe{height:100%;top:0;left:0;opacity:0;transition:opacity 1s ease-out}.-js-loading .ytl_svg{transform:translate3d(-50%,-50%,0) scale(1.6);opacity:.7}.ytl_path-loading{display:none;transform-origin:50% 50%;animation:rotating 1s linear infinite}.-js-loading .ytl_path-loading{display:block}.-js-loading .ytl_path-play{display:none}@keyframes rotating{from{transform:rotate(0)}to{transform:rotate(360deg)}}.-js-loaded{cursor:unset}.-js-loaded>.ytl_iframe{opacity:1}.-js-loaded::before,.-js-loaded>.ytl_btn-play,.-js-loaded>.ytl_title{visibility:hidden;opacity:0}</style>`;
class YouTubeLiteEmbed extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=this.shadowRoot;e.appendChild(template.content.cloneNode(!0)),e.videoId=encodeURIComponent(this.getAttribute("videoid")),e.heading=this.getAttribute("videoTitle")?encodeURIComponent(this.getAttribute("videoTitle")):"Play video",e.posterUrl=`https://i.ytimg.com/vi/${e.videoId}/hqdefault.jpg`,YouTubeLiteEmbed.addPrefetch("preload",e.posterUrl,"image")}connectedCallback(){const e=this.shadowRoot;this.style.backgroundImage=`url("${e.posterUrl}")`;let t=e.querySelector(".ytl");t||this.addWrapper(),(t=e.ytl).heading||this.addHeading(),t.querySelector(".lty-playbtn")||this.addButton(),t.addEventListener("pointerover",YouTubeLiteEmbed.warmConnections,{once:!0}),t.playBtn.addEventListener("click",e=>{t.classList.add("-js-loading"),this.addIframe()})}static addPrefetch(e,t,o){const d=document.createElement("link");d.rel=e,d.href=t,o&&(d.as=o),d.crossorigin=!0,document.head.append(d)}static warmConnections(){YouTubeLiteEmbed.preconnected||(YouTubeLiteEmbed.addPrefetch("preconnect","https://www.youtube-nocookie.com"),YouTubeLiteEmbed.addPrefetch("preconnect","https://www.google.com"),YouTubeLiteEmbed.addPrefetch("preconnect","https://googleads.g.doubleclick.net"),YouTubeLiteEmbed.addPrefetch("preconnect","https://static.doubleclick.net"),YouTubeLiteEmbed.preconnected=!0)}addWrapper(){const e=this.shadowRoot,t=document.createElement("div");t.className="ytl",e.appendChild(t),e.ytl=t}addHeading(){const e=this.shadowRoot,t=document.createElement("h3");t.id=decodeURIComponent(e.videoId),t.className="ytl_title",t.textContent=decodeURIComponent(e.heading),e.ytl.heading=t,e.ytl.appendChild(t)}addButton(){const e=this.shadowRoot,t=document.createElement("button");t.type="button",t.classList.add("ytl_btn-play"),t.setAttribute("aria-label","Play video: "+decodeURIComponent(e.heading)),t.setAttribute("aria-pressed",!1),t.innerHTML='\n<svg class=ytl_svg viewBox="0 0 68 48" aria-hidden=true focusable=false><g class=ytl_path-play><path class=ytl_path-playBg d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"/><path d="M 45,24 27,14 27,34" fill=#fff /></g><circle class=ytl_path-loading cx=34 cy=24 r=18 fill=none stroke=#fff stroke-dasharray="60 30" stroke-width=4 transform="rotate(190 34 24)"/></svg>',e.ytl.playBtn=t,e.ytl.appendChild(t)}addIframe(){const e=this.shadowRoot,t=`\n<iframe class=ytl_iframe title="${decodeURIComponent(e.heading)}" frameborder=0 allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"\nsrc="https://www.youtube-nocookie.com/embed/${e.videoId}?autoplay=1"></iframe>`;e.ytl.insertAdjacentHTML("beforeend",t);const o=e.querySelector(".ytl_iframe");o.addEventListener("load",t=>{setTimeout(t=>{e.ytl.classList.add("-js-loaded")},1e3)},{once:!0}),o.focus()}}
customElements.define('yt-l', YouTubeLiteEmbed);
</code></pre>
</figure>
</section>
<section>
<h2>Alternative solutions</h2>
<p class=tagline>This is Version 3 which is heavily based on the Paul Irish project: <a class=-nowrap target=_blank title="[new window]" href="https://github.com/paulirish/lite-youtube-embed">Lite YouTube Embed</a>, but updated to meet WCAG Accessibility requirements.</p>
<p>There's also a pen of <a target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/dyoJrav">Version 2</a> which was loosely based around <a target=_blank title="[new window]" href="https://www.cssscript.com/load-youtube-video-thumbnail-lazytube/">LazyTube</a> and doesn't use Custom Elements.</p>
<p>Another method worthy of serious consideration is: <a class=-nowrap target=_blank title="[new window]" href="https://dev.to/haggen/lazy-load-embedded-youtube-videos-520g">Lazy load embedded YouTube videos</a> by Arthur Corenzan.</p>
<p>Personally, if you can get away from YouTube as a hosting solution, I prefer <a target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/WNvywpB?editors=1000">Cloud CDN-hosted video</a> using <a class=-nowrap target=_blank title="[new window]" href="https://cloudinary.com/">Cloudinary</a> or <a class=-nowrap target=_blank title="[new window]" href="https://www.netlify.com/">Netlify</a> and the HTML video element. Far less data transferred, and easier to embed.</p>
<h2>Credits</h2>
<p>Videos courtesy of <a class=-nowrap target=_blank title="[new window]" href="http://batthedog.uk/">Bat the Dog</a></p>
<p>Font-size, and spacing, calculation generated by: <a class=-nowrap target=_blank title="[new window]" href="https://websemantics.uk/tools/responsive-font-calculator/">Fluid-responsive font-size calculator</a></p>
<p>Code blocks: <a class=-nowrap target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/MEbeEg">Code highlighting with Prism.js</a></p>
<p>Embedding code: <a class=-nowrap target=_blank title="[new window]" href="https://websemantics.uk/tools/escaping-html/">Escaping HTML symbols/entities</a></p>
</section>
</main>
<!-- Codepen footer include -->
[[[https://codepen.io/2kool2/pen/mKeeGM]]]
!
