MediaEmbed
MediaLazy YouTube and Vimeo embeds that load nothing until clicked
Demo
YouTube
Open the Network panel before clicking: only the static thumbnail on i.ytimg.com is
fetched, and none of YouTube's player code loads until you press play.
Vimeo, with an explicit poster
Vimeo thumbnails need a network lookup, so pass poster to keep the facade offline.
Start offset
Cloudflare Stream
<MediaEmbed
provider="cloudflare"
videoId="a1b2c3d4e5f6"
customerCode="abc123"
title="Product tour"
primaryColor="#c8102e"
/>Embeds Cloudflare's own player, with the poster derived from the Stream URL scheme. A full customer-<code>.cloudflarestream.com URL works too, and the customer code
is read from it. To play a Stream video with this design system's controls instead, use Video with cloudflareStream().
Matterport 3D tour
A tour opens rather than plays, so the facade shows a 3D affordance and no duration. Matterport publishes no derivable thumbnail, so this one uses the placeholder.
Matterport, with its real preview fetched
fetchMetadata opts into one lookup for the space's preview image and name. Off by default,
since contacting the provider before the click is what the facade avoids.
Unrecognised URL
This video could not be loaded.
An unparseable URL renders an inline error instead of an empty frame.
Embeds route through youtube-nocookie.com by default, so no tracking cookies are set
before playback.
Usage
import { MediaEmbed } from '@classic-homes/theme-svelte';