1.1.1 • Published 10 months ago

svelte-youtube-lite v1.1.1

Weekly downloads
-
License
-
Repository
github
Last release
10 months ago

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

Compatibility

Version 1.0.0 and above are compatible with Svelte 5 (branch main). For Svelte 4 projects, use ^0.6.0 (branch svelte4)

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="aYtE6XE6b_s" />

With low quality thumbnail

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

With custom iframe title

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

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

Without title

<Youtube id="aYtE6XE6b_s" showTitle="{false}" />

Custom Play Button

If you want to use a custom play button, you can use the snippet slot to add your own button. A PlayButton component is also provided if you simply want to change the title and aria-label of the default play button.

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

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 DNS preconnect for all youtube iframe assets
  • parameter (boolean) : load with intersection observer
  • parameter (number) : start time
  • parameter (string) : playlist id
  • fallback to YouTube iframe API for browsers with bad autoplay support
1.1.1

10 months ago

0.6.2

10 months ago

1.1.0

10 months ago

1.0.0

10 months ago

0.6.1

10 months ago

0.6.0

10 months ago

0.5.1

2 years ago

0.5.0

2 years ago

0.4.2

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.1

2 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago