Skip to content
Twilight React Playground
ثيم رائدaren

Youtube

componentBeginnerserverbrowserlive demo

Embeds a YouTube video with a lightweight player that loads YouTube's own player only when the shopper presses play.

import { Youtube } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

Give it a YouTube video id (the part after watch?v= in a link) and it shows the video's thumbnail with a play button. YouTube's heavy player loads only after a click, which keeps the page fast.

Signature

const Youtube: React.MemoExoticComponent<(props: {
  data: {
    youtube_id: string;
    [key: string]: unknown;
  };
}) => JSX.Element | null>

Try it live

A lightweight YouTube player: a thumbnail with a play button, and the real player only after a click.Try this: clear the id: the block renders nothing. Then paste the id of any YouTube video.
Storefront canvas · ar · RTL
Controls
The part after watch?v= in a YouTube link.
What a theme writes
import { Youtube } from '@salla.sa/twilight-theme-engine/components/home';

export function BrandVideo() {
  return <Youtube data={{ youtube_id: 'aqz-KE-bpKQ' }} />;
}

Example

app/components/home/BrandVideo.tsx
import { Youtube } from '@salla.sa/twilight-theme-engine/components/home';

export function BrandVideo() {
  return <Youtube data={{ youtube_id: 'aqz-KE-bpKQ' }} />;
}

How it behaves

  • After mount it imports @justinribeiro/lite-youtube, which defines the lite-youtube element, then renders it with params="rel=0" inside .container .videoWrapper. Until then it shows a grey pulse box, which is also what the server renders.

Gotchas

  • Without youtube_id it renders nothing. If the player code fails to download, the error is logged and the grey box stays.

Related

DefaultHomeComponents

The engine's 13 built-in home blocks, keyed by block path, ready to spread into registerHomeComponents.

Source and docs