YouTube

A YouTube video or playlist, without cookies.

import { YouTube } from 'sveltekit-embed';

Svelte

1<YouTube youtube_id="dQw4w9WgXcQ" />

youtube_id is the v parameter of the video’s URL. Videos are served from youtube-nocookie.com, so YouTube does not set cookies until the visitor presses play.

Playlists

Pass list_id instead of youtube_id, and index to start on a particular video.

Svelte

1<YouTube
2	list_id="PLlrxD0HtieHhS8VzuMCfQD4uJ9yne1mE6"
3	index={2}
4	modest_branding
5/>

Start at a timestamp

skip_to takes hours, minutes and seconds. Leave out the ones you do not need.

Svelte

1<YouTube youtube_id="dQw4w9WgXcQ" skip_to={{ m: 1, s: 30 }} loop />

Aspect ratio

The player keeps a 16:9 shape at any width. Use aspect_ratio for vertical or older footage.

Svelte

1<YouTube youtube_id="dQw4w9WgXcQ" aspect_ratio="4:3" />

Props

Prop	Type	Default
`youtube_id` The video’s ID, the `v` in its URL.	`string`	`''`
`list_id` A playlist ID. Used when `youtube_id` is empty.	`string`	`''`
`index` Which video in the playlist to start on.	`number`	`0`
`autoplay` Start playing as soon as it loads.	`boolean`	`false`
`mute` Start with the sound off.	`boolean`	`false`
`controls` Show the player controls.	`boolean`	`true`
`loop` Start again when the video or playlist ends.	`boolean`	`false`
`modest_branding` Use minimal YouTube branding.	`boolean`	`false`
`rel` Show related videos at the end.	`boolean`	`false`
`aspect_ratio` Width to height, e.g. `4:3` or `9:16`.	`string`	`'16:9'`
`skip_to` Where to start playing from.	`{ h?: number; m?: number; s?: number }`	`{ h: 0, m: 0, s: 0 }`
`loading` `lazy` waits until the embed is near the viewport, `eager` loads it straight away.	`'lazy' \| 'eager'`	`'lazy'`
`iframe_styles` Inline styles for the iframe.	`string`	`'border-radius: 0.6rem;'`

Something wrong on this page? Edit it on GitHub.