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

    videoid The 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 Irish Justin Ribeiro