repository·main·Indexed 23 days ago
https://github.com/justinribeiro/lite-youtubeA Shadow DOM-encapsulated web component that loads YouTube embed iframes faster by using placeholder images and only loading the heavy iframe when necessary. It supports custom poster images, playlist integration, and provides a liteYoutubeIframeLoaded event for interaction with the YouTube JS API.
The component is responsive and can be styled using standard CSS and CSS Custom Properties.
--lite-youtube-aspect-ratio to change the video aspect ratio.--lite-youtube-frame-shadow-visible: no; to create a flat look by removing the frame shadow.Use the ::part(playButton) pseudo-element to style the play button inside the Shadow DOM.
You can install the component via a package manager or load it directly from a CDN.
Install the package and import it into your project entry point.
Use a <script type="module"> tag to load the minified version directly in your HTML.
npm i @justinribeiro/lite-youtube
# or
yarn add @justinribeiro/lite-youtubeimport '@justinribeiro/lite-youtube';<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1/lite-youtube.min.js"></script>You can fine-tune how the placeholder image is handled.
posterquality to select specific YouTube thumbnail sizes (maxresdefault, sddefault, mqdefault, hqdefault).image to provide your own custom poster image.posterloading to set the loading attribute (e.g., lazy or eager).To render a standard YouTube video, use the <lite-youtube> web component with the videoid attribute.
To ensure accessibility and functionality when JavaScript is disabled or fails to load, include a fallback link inside the component. This link will be visible before the component initializes or if the script fails.
To support playlists, provide both a videoid (to load the initial thumbnail) and a playlistid.
<!-- Basic -->
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
<!-- With Fallback -->
<lite-youtube videoid="guJLfqTFfIw">
<a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=guJLfqTFfIw">Watch on YouTube</a>
</lite-youtube>
<!-- Playlist -->
<lite-youtube
videoid="VLrYOji75Vc"
playlistid="PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"
></lite-youtube>params attribute. Note that the autoplay parameter is generally not supported due to performance and loading constraints.The component fires a liteYoutubeIframeLoaded event when the YouTube iframe has finished loading. This is useful if you need to interact with the video via the YouTube JS API immediately after load.
Event Detail:
videoId: The ID of the video that was loaded.The <lite-youtube> component accepts several attributes to customize behavior, accessibility, and performance.
| Name | Description | Default |
| 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` |
| `posterloading` | Set img lazy load attr `loading` for poster image | `lazy` |
| `nocookie` | Use youtube-nocookie.com as iframe embed uri | `false` |
| `autoload` | Use Intersection Observer to load iframe when scrolled into view | `false` |
| `autopause` | Use video auto-pausing when scrolled out of view | `false` |
| `short` | Show 9:16 YouTube Shorts-style interaction on mobile devices | `false` |
| `disablenoscript` | Disables `noscript` injector added to lightdom for search indexing | `false` |
| `params` | Set YouTube query parameters | `` |