lite-youtube Web Component Examples

Download Back To CSSScript.Com

A vanilla JavaScript web component for faster YouTube embeds. Uses Shadow DOM, lazy loading, and responsive design to reduce page load times.

Basic Usage

<lite-youtube videoid="3NJlbnedqqs"></lite-youtube>
    

Add Video Title

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

Change "Play" for Locale

<lite-youtube
   videoid="3NJlbnedqqs"
   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="3NJlbnedqqs"></lite-youtube>
    </div>
    

Set video start time

<lite-youtube videoid="3NJlbnedqqs" videoStartAt="5"></lite-youtube>
    

AutoLoad with IntersectionObserver

<lite-youtube videoid="3NJlbnedqqs" videotitle="This is a video title" autoload></lite-youtube>
    

YouTube QueryParams

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

<lite-youtube videoid="3NJlbnedqqs" posterquality="maxresdefault></lite-youtube>
    

<lite-youtube videoid="3NJlbnedqqs" nocookie</lite-youtube>
    

YouTube Playlist

<lite-youtube videoid="VLrYOji75Vc" playlistid="G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"></lite-youtube>