lhoang / svelte-youtube-lite

A simple svelte component for creating YouTube embeds with a focus on performance and privacy (GDPR compliant).

svelte-youtube-lite

A simple svelte component for creating YouTube embeds with a focus on performance and privacy (GDPR compliant).

• Loads the video thumbnail on page load
• Creates the embed when the thumbnail is clicked
• Fallback to YouTube iframe API for browsers with bad autoplay support

Installation

npm install -D svelte-youtube-lite

Usage

Run the demo page locally for a preview

Import

<script>
	import { Youtube } from 'svelte-youtube-lite';
</script>

Minimal example

<Youtube id="QH2-TGUlwu4" />

With low quality thumbnail

<Youtube id="QH2-TGUlwu4" thumbnail="mqdefault" />

With custom iframe title

(YouTube iframe API fallback uses the videos title as iframe title)

<Youtube id="QH2-TGUlwu4" title="Cute cat video" />

Without title

<Youtube id="QH2-TGUlwu4" showTitle="{false}" />

Run demo locally

git clone https://github.com/radiofrance/svelte-youtube-lite.git
cd svelte-youtube-lite
npm i
npm run dev

Todo

• support for full youtube urls (eg: with playlist and start time) ?
• support for youtube shorts ? change from 16:9 to vertical ?
• use preconnect for all youtube iframe assets
• parameter (boolean) : load with intersection observer
• parameter (number) : start time
• parameter (string) : playlist id