@justinribeiro/lite-youtube

<lite-youtube>

A web component that displays render YouTube embeds faster. The shadowDom web component version of Paul's lite-youtube-embed.

Features

• 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
• You can set autoload to use Intersection Observer to load the iframe when scrolled into view.

Install

This web component is built with ES modules in mind and is available on NPM:

Install code-block:

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

After install, import into your project:

import '@justinribeiro/lite-youtube';

Install with CDN

If you want the paste-and-go version, you can simply load it via CDN:

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

Basic Usage

<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>

Add Video Title

<lite-youtube videoid="guJLfqTFfIw" videotitle="This is a video title"></lite-youtube>

Change "Play" for Locale

<lite-youtube
   videoid="guJLfqTFfIw"
   videoplay="Mirar"
   videotitle="Mis hijos se burlan de mi español">
</lite-youtube>

Style It

Height and Width are responsive in the component.

<style>
  .styleIt {
    width: 400px;
    margin: auto;
  }
</style>
<div class="styleIt">
  <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
</div>

AutoLoad with IntersectionObserver

Uses Intersection Observer if available to automatically load the YouTube iframe when scrolled into view.

  <lite-youtube
    videoid="guJLfqTFfIw"
    autoload>
   </lite-youtube>

Attributes

The web component allows certain attributes to be give a little additional flexibility.

Name	Description	Default
videoid	The YouTube videoid
videotitle	The title of the video	Video
videoplay	The title of the play button (for translation)	Play
autoload	Use Intersection Observer to load iframe when scrolled into view	false