A simple svelte component for creating YouTube embeds with a focus on performance and privacy (GDPR compliant).
Version 1.0.0
and above are compatible with Svelte 5 (branch main
). For Svelte 4 projects, use ^0.6.0
(branch svelte4
)
npm install -D svelte-youtube-lite
Run the demo page locally for a preview
<script>
import { Youtube } from 'svelte-youtube-lite';
</script>
<Youtube id="aYtE6XE6b_s" />
<Youtube id="aYtE6XE6b_s" thumbnail="mqdefault" />
(YouTube iframe API fallback uses the videos title as iframe title)
<Youtube id="aYtE6XE6b_s" title="Cute cat video" />
<Youtube id="aYtE6XE6b_s" showTitle="{false}" />
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>
git clone https://github.com/radiofrance/svelte-youtube-lite.git
cd svelte-youtube-lite
npm i
npm run dev