YouTube Playlist Carousel

The YouTube Playlist Carousel component automatically fetches and displays videos from a YouTube playlist in a carousel format. Videos are loaded dynamically from the YouTube Data API and displayed using the MediaCarousel component.

Basic Usage

Display the latest 6 videos from a YouTube playlist. The component requires a playlistId parameter. The YouTube API key is configured on the backend via the YOUTUBE_API_KEY environment variable.

Custom Max Results

You can specify a different number of videos to display using the maxResults prop.

Usage Examples

Here's how to use the component in your templates:

11ty Template (Preact/HTM)

const YouTubePlaylistCarousel = require('./_includes/components/YouTubePlaylistCarousel/YouTubePlaylistCarousel');
const { html } = require('htm/preact');

// In your 11ty template:
<({
	playlistId,
	maxResults = 6,
	classes,
	...properties
}) => {
	if (!playlistId) {
		return html`<div class="u-text-error">Error: playlistId is required</div>`;
	}

	const classNames = classnames(
		'lta-youtube-playlist-carousel',
		'js-lta-youtube-playlist-carousel',
		classes
	);

	// Render a placeholder carousel that will be populated by client-side script
	return html`
		<div 
			class="${classNames}" 
			data-playlist-id="${playlistId}"
			data-max-results="${maxResults}"
			data-cache-duration="10"
			"...${properties}"
		>
			<div class="lta-youtube-playlist-carousel__loading u-text-center u-py-4">
				<p>Loading videos...</p>
			</div>
			<div class="lta-youtube-playlist-carousel__content" style="display: none;">
                        <${MediaCarousel} classes="lta-youtube-playlist-carousel__carousel" data-loop="false">
                                <!-- Videos will be inserted here by client-side script as swiper-slide elements with data-is-video attribute -->
                        </${MediaCarousel}>
			</div>
			<div class="lta-youtube-playlist-carousel__error" style="display: none;">
				<p class="u-text-error">Failed to load videos. Please try again later.</p>
			</div>
		</div>
	`;
}playlistId="PL6P9iGS4Ir9nWAVdA1DkOHJ7Vrkm_uCEn"
	maxResults="6"
/&gt;

// With custom classes:
&lt;({
	playlistId,
	maxResults = 6,
	classes,
	...properties
}) => {
	if (!playlistId) {
		return html`<div class="u-text-error">Error: playlistId is required</div>`;
	}

	const classNames = classnames(
		'lta-youtube-playlist-carousel',
		'js-lta-youtube-playlist-carousel',
		classes
	);

	// Render a placeholder carousel that will be populated by client-side script
	return html`
		<div 
			class="${classNames}" 
			data-playlist-id="${playlistId}"
			data-max-results="${maxResults}"
			data-cache-duration="10"
			"...${properties}"
		>
			<div class="lta-youtube-playlist-carousel__loading u-text-center u-py-4">
				<p>Loading videos...</p>
			</div>
			<div class="lta-youtube-playlist-carousel__content" style="display: none;">
                        <${MediaCarousel} classes="lta-youtube-playlist-carousel__carousel" data-loop="false">
                                <!-- Videos will be inserted here by client-side script as swiper-slide elements with data-is-video attribute -->
                        </${MediaCarousel}>
			</div>
			<div class="lta-youtube-playlist-carousel__error" style="display: none;">
				<p class="u-text-error">Failed to load videos. Please try again later.</p>
			</div>
		</div>
	`;
}playlistId="PL6P9iGS4Ir9nWAVdA1DkOHJ7Vrkm_uCEn"
	maxResults="4"
	classes="my-custom-class"
/&gt;

HTML (Server-Side Rendered)

<div 
	class="lta-youtube-playlist-carousel js-lta-youtube-playlist-carousel"
	data-playlist-id="PL6P9iGS4Ir9nWAVdA1DkOHJ7Vrkm_uCEn"
	data-max-results="6"
	data-cache-duration="10"
>
	<div class="lta-youtube-playlist-carousel__loading u-text-center u-py-4">
		<p>Loading videos...</p>
	</div>
	<div class="lta-youtube-playlist-carousel__content" style="display: none;">
		<!-- MediaCarousel will be rendered here -->
	</div>
	<div class="lta-youtube-playlist-carousel__error" style="display: none;">
		<p class="u-text-error">Failed to load videos. Please try again later.</p>
	</div>
</div>

Props

Configuration