svelte-youtube-lite

A lightweight Svelte wrapper around the YouTube embed, loading only a thumbnail until the user presses play.

Basic example (fits container size)

<div style="width: 100%; height: 300px;">
	<Youtube id="aYtE6XE6b_s" />
</div>

Fixed size example

<Youtube id="aYtE6XE6b_s" width="100px" height="100px" />

Responsive size example

<div style="width: 100%; height: 400px;">
	<Youtube id="aYtE6XE6b_s" width="100%" height="100%" />
</div>

Low quality thumbnail

<Youtube id="aYtE6XE6b_s" thumbnail="mqdefault" />

Custom iframe title

(YouTube iframe API fallback uses the video's title as iframe title)

Cute cat video

<Youtube id="aYtE6XE6b_s" title="Cute cat video" />

Without a visible title

(the iframe still gets "Cute cat video" as its title attribute for accessibility; showTitle only hides it from the visual overlay)

<Youtube id="aYtE6XE6b_s" title="Cute cat video" showTitle={false} />

Custom aria label button

<Youtube id="aYtE6XE6b_s" showTitle={false}>
	{#snippet playButton()}
		<PlayButton ariaLabel="Custom play button" />
	{/snippet}
</Youtube>

Custom button

<Youtube id="aYtE6XE6b_s" showTitle={false}>
	{#snippet playButton()}
		<button
			style="position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0);"
		>
			A completely custom button
		</button>
	{/snippet}
</Youtube>

With custom player parameters

Video starts at 30s and is muted

<Youtube id="aYtE6XE6b_s" params={{ start: '30', mute: '1' }} />

Lazy loaded thumbnail

Loads only when the video enters the viewport.

Lazy loaded YouTube thumbnail

<Youtube id="9jLTaiT_cVs" lazy title="Lazy loaded YouTube thumbnail" />

With playlist

Plays as part of the "Official Blender Open Movies" playlist.

Singularity

<Youtube id="l5OZu-IrXpw" playlistId="PL6B3937A5D230E335" title="Singularity" />

From a full YouTube URL

id and playlistId are both derived from a single watch URL.

Singularity

<Youtube
	url="https://www.youtube.com/watch?v=l5OZu-IrXpw&list=PL6B3937A5D230E335"
	title="Singularity"
/>

From a youtu.be URL with a timestamp

Video starts at 30s, derived from the `t` query param.

<Youtube url="https://youtu.be/aYtE6XE6b_s?t=30" />

YouTube Short from its URL

A shorts URL switches the player to a 9 / 16 ratio on its own, so the vertical video fills it instead of being letterboxed. It can be overridden by explicitly setting the `ratio` prop.

<Youtube url="https://www.youtube.com/shorts/6IlJ-caK_7A" width="270px" />

Explicit aspect ratio

A bare Short id looks like any other video id, so pass `ratio` yourself. '16 / 9', '4 / 3', '1 / 1' and '9 / 16' are offered as presets, and any other CSS ratio works too.

<Youtube id="6IlJ-caK_7A" ratio="9 / 16" width="270px" />

Eager preconnect

Connections to the thumbnail and player hosts are normally opened as they are needed: the thumbnail host while the preview loads, the player host on the first pointer, focus or touch. `eager` opens both as soon as the component renders, which suits a player the visitor is expected to start right away. `none` opens neither.

<Youtube id="aYtE6XE6b_s" preconnect="eager" />