Home

Awesome

npm version min+gzip

Statements Branches Functions Lines

<lite-youtube>

A web component that renders YouTube embeds faster. The ShadowDom web component version of Paul's lite-youtube-embed.

Features

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.3.1/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</h3>

<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.

NameDescriptionDefault
videoidThe YouTube videoid``
playlistidThe YouTube playlistid; requires a videoid for thumbnail``
videotitleThe title of the videoVideo
videoplayThe title of the play button (for translation)Play
videoStartAtSet the point at which the video should start, in seconds0
posterqualitySet thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault)hqdefault
posterloadingSet img lazy load attr loading for poster imagelazy
nocookieUse youtube-nocookie.com as iframe embed urifalse
autoloadUse Intersection Observer to load iframe when scrolled into viewfalse
paramsSet YouTube query parameters``

Events

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

Event NameDescriptionReturns
liteYoutubeIframeLoadedWhen the iframe is loaded, allowing us of JS APIdetail: { videoId: this.videoId }