@justinribeiro/lite-youtube

<lite-youtube>

A web component that renders 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
• Set the start attribute to start at a particular place in a video
• You can set autoload to use Intersection Observer to load the iframe when scrolled into view.
• Loads placeholder image as WebP with a Jpeg fallback

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@1.2.0/lite-youtube.js"></script>

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>

Set a video start time

<!-- Start at 5 seconds -->
<lite-youtube videoid="guJLfqTFfIw" videoStartAt="5"></lite-youtube>

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>

YouTube QueryParams

Use any YouTube Embedded Players and Player Parameters you like

<lite-youtube videoid="guJLfqTFfIw" params="controls=0&enablejsapi=1">
</lite-youtube>

Attributes

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

Name	Description	Default
videoid	The YouTube videoid	``
playlistid	The YouTube playlistid; requires a videoid for thumbnail	``
videotitle	The title of the video	Video
videoplay	The title of the play button (for translation)	Play
videoStartAt	Set the point at which the video should start, in seconds	0
posterquality	Set thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault)	hqdefault
nocookie	Use youtube-nocookie.com as iframe embed uri	false
autoload	Use Intersection Observer to load iframe when scrolled into view	false
params	Set YouTube query parameters	``

Events

The web component fires events to give the ability understand important lifecycle.

Event Name	Description	Returns
liteYoutubeIframeLoaded	When the iframe is loaded, allowing us of JS API	detail: { videoId: this.videoId }