DEV Community

loading...

Faster YouTube embeds with lite-youtube web component

justinribeiro profile image Justin Ribeiro Originally published at justinribeiro.com on ・2 min read

I was puttering around Github at the end of last week and I stumbled upon Paul Irish’s lite-youtube-embed. I heart the things that Paul comes up with and in the run around with Chrome Dev Summit and what not last week, I had likely missed it (and as of this writing, it’s come a long way since I saw it on Friday in a single html file).

What I really was intrigued about was the numbers: it was fast. Having been embedding YouTube videos in some of my posts recently, I wanted more speed as the YouTube embeds weren’t exactly blazing fast in my traces. So I decided I’d go a bit of a different direction than Paul and build a ShadowDOM version of the component (since Paul was going to only build the custom element version, I didn’t want to pester him with a shadowDOM argument in his issue tracker).

My encapsulated and responsive version is now available on NPM at @justinribeiro/lite-youtube, recently updated to version 0.3.1. Primary features include:

  • No dependencies; it’s just a vanilla web component.
  • It’s fast yo.
  • It’s Shadow Dom encapsulated!
  • It’s responsive 16:9
  • It’s accessible via keyboard and will set ARIA via the videotitle attribute
  • It’s locale ready; you can set the videoplay to have a properly locale based label

To use, you can install it via npm or yarn:

npm i @justinribeiro/lite-youtube # or yarn add @justinribeiro/lite-youtube

Or you can just include is directly with JSDelivr:

\<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.3.1/lite-youtube.js"\>

From there, just include it your page with the videoid and videotitle

\<lite-youtube videoid="guJLfqTFfIw" videotitle="Sample output of devtools-to-video cli tool"\> \</lite-youtube\>

If you’d like to contribute or find an issue, the project is available on Github or if you’re looking for the non-ShadowDOM version, do check out Paul’s repo and pending NPM package as well.

Discussion (0)

pic
Editor guide