Intro

Embed YouTube Videos and shorts.

This is a web component that loads YouTube embed iframes faster. Embed YouTube Shorts, videos, or playlists. 
Works with Shorts and playlists too.

Demo

YouTube Video

YouTube Playlist

Components

  • YouTube

    This is the player you embed. You can set various attributes to this component such as Video, playlist etc. to decide what content to render in the frame. This is an adaptation of @justinribeiro's lite-youtube component on npm. It's modified for toddle. 

    Attributes

    videoidThe YouTube videoid. The videoid from this YouTube video (https://www.youtube.com/watch?v=SY3o9FQs1sU) is: SY3o9FQs1sU
    playlistid
    		The YouTube playlistid; requires a videoid for thumbnail
    videotitle
    		The title of the video
    videoplay

    The title of the play button (for translation)
    videoStartAt
    		Set the point at which the video should start, in seconds.
    posterquality
    		Set thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault)
    posterloading
    		Set img lazy load attr loading for poster image
    nocookie
    		Use youtube-nocookie.com as iframe embed uri
    autoload
    		Use Intersection Observer to load iframe when scrolled into view
    short
    		Show 9:16 YouTube Shorts-style interaction on mobile devices
    params
    Set YouTube query parameters

    Credits:

    Paul IrishJustin Ribeiro