Video-embed

A collection of Svelte components and functions to work with Vimeo and Youtube embeds.

Components

EmbedGroup.svelte

An embed group that provides a context for video embeds.

Props

• url (string): The url of the video.

Slot props

Slot props are also available via getVideoEmbedContext().

• playing (boolean): true if the video embed is currently loaded and playing.
• play (() => void): Play the video.
• requestPreconnect (() => void): Request preconnection to the embed domains.
• preconnect (boolean): true if preconnect has been requested
• url (string): The URL of the video

EmbedPlayButton.svelte

A button that calls requestPreconnect when hovered and plays the video on click.

Props

• class (string): The classes to apply to the button element.

EmbedThumbnail.svelte

An img element that renders the default video thumbnail. Make sure to setup the vimeo-thumbnail.jpg endpoint before using (documented below).

Props

• url (string): The url of the video. Already provided if this component is used inside an EmbedGroup.
• alt (string): The alt text for the image.
• class (string): The classes to apply to the img element.

EmbedSelector.svelte

A selector component that automatically determines the provider and renders the appropriate embed. For more control over how the markup is rendered, the component has a slot that provides the embed component.

Props

• url (string): The url of the video. Already provided if this component is used inside an EmbedGroup.

Slot props

• provider ('vimeo' | 'youtube'): The embed provider, determined from the url.

• EmbedComponent (SvelteComponent): The Svelte component of the embed.

YoutubeEmbed.svelte

The Youtube embed component. Automatically rendered by EmbedSelector.

VimeoEmbed.svelte

The Vimeo embed component. Automatically rendered by EmbedSelector.

Example

<script lang="ts">
	import type { AssetInterface } from 'src/craft';
	import { fade } from 'svelte/transition';
	import EmbedGroup from '$com/ui/video-embed/EmbedGroup.svelte';
	import EmbedSelector from '$com/ui/video-embed/EmbedSelector.svelte';
	import EmbedPoster from '$com/ui/video-embed/decoration/EmbedPoster.svelte';
	import EmbedPlayButton from '$com/ui/video-embed/decoration/EmbedPlayButton.svelte';
	import PlayIcon from '$com/ui/PlayIcon.svelte';
	import LazyMedia from '$com/ui/LazyMedia.svelte';

	export let embedUrl: Maybe<string>;
	export let poster: Maybe<AssetInterface>;
</script>

<EmbedGroup url={embedUrl} let:playing>
	<div class="grid-stack grid aspect-[2/1] w-full overflow-hidden rounded">
		<EmbedSelector />
		{#if !playing}
			<div class="h-full w-full" out:fade={{ duration: 200 }}>
				<EmbedPlayButton>
					<div class="grid-stack grid h-full w-full place-items-center">
						{#if poster}
							<Media media={poster} class="h-full w-full object-cover" />
						{:else}
							<EmbedThumbnail />
						{/if}
						<PlayIcon />
					</div>
				</EmbedPlayButton>
			</div>
		{/if}
	</div>
</EmbedGroup>

Functions

isYoutubeUrl()

Check if a URL is a valid YouTube URL

getYoutubeId()

Get the YouTube video ID from a URL

getYoutubeThumbnailUrl()

Get the URL of a YouTube video thumbnail

isVimeoUrl()

Check if a URL is a valid Vimeo URL

getVimeoId()

Get the Vimeo video ID from a URL

getVimeoThumbnailUrl()

Get the URL of a Vimeo video thumbnail. Make sure to setup the vimeo-thumbnail.jpg route in your app (see below).

vimeoThumbnail request handler

To be able to simply generate a vimeo thumbnail from a Vimeo video url (like we can do for Youtube), you must make an API call to Vimeo. To simplify this, you can setup a server route in your Sveltekit app that handles this with the vimeoThumbnailHandler.

Note that getVimeoThumbnailUrl() and EmbedThumbnail.svelte expect the endpoint to be /vimeo-thumbnail.jpg, so for these to work properly, add the following route to your app:

src/routes/vimeo-thumbnail.jpg/+server.ts:

import { vimeoThumbnailHandler } from '@288-toolkit/video-embed';

export const GET = vimeoThumbnailHandler;