Source code

Web Components

YouTube Short Carousel

Pass block-id as the payload. The client makes a single call to /api/youtube/block?blockId=...; the backend returns the same shape as playlist (videos array with title, thumbnail, etc.). The carousel renders from that response.

Usage

Example markup

Place the component with block-id only. The client shows a loading state, then fetches the block and video details and renders the carousel.

<lta-youtube-short-carousel
  id="my-carousel"
  block-id="youtube-shorts-demo"
  block-endpoint="/api/youtube/block"
  cache-duration="10"
  slides-xl="6"
  slides-md="4"
  slides-sm="2"
></lta-youtube-short-carousel>

Initial state (before API response): the component renders a loading message. After GET /api/youtube/block?blockId=... (one call), it injects the carousel with lta-youtube-shorts slides and the modal markup.

Props

  • id – Unique identifier for the carousel
  • block-id – Block identifier (required). Client calls the block API once; backend returns videos (same shape as playlist).
  • block-endpoint – Optional. Block API URL (default /api/youtube/block). Passed as data-block-endpoint.
  • cache-duration – Optional. Passed to the block API (e.g. cache duration in minutes for the response).
  • slides-xl, slides-md, slides-sm – Slides per view (defaults: 4, 4, 2)

Features

  • API call with block-id only – no need to pass individual short IDs in markup
  • Single block call – backend returns full videos array (same as playlist)
  • Fullscreen modal playback with prev/next navigation