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:

Or you can just include is directly with JSDelivr:

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

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.