0.2.3 • Published 3 months ago
svelte-youtube-embed v0.2.3
Svelte Youtube Embed
Embeds a clickable youtube thumbnail instead of the iframe. Upon clicking, loads the iframe.
Why?
- loads the site faster
- responsive image & video
- less than 1KB (minified & gzipped)
Installation
npm i -D svelte-youtube-embed
Usage
<script>
import Youtube from "svelte-youtube-embed";
</script>
<Youtube id="KrSH82gg7BQ" />
<!-- custom play button -->
<Youtube id="KrSH82gg7BQ">
<button>play</button>
</Youtube>
<!-- Custom overlay -->
<Youtube
id="KrSH82gg7BQ"
--overlay-bg-color="hsla(0, 0%, 0%, 0.3)"
--overlay-transition="all 100ms linear"
/>
<!-- Custom title -->
<Youtube
id="kgZeIDSHlhQ"
--title-color="#111111"
--title-shadow-color="#cccccc"
--title-font-family="Lato, sans-serif"
/>
<!-- Alternative thumbnail if default thumbnail doesn't show automatically -->
<Youtube id="g50dm1OCV3w" altThumb="{true}" />
The id
is youtube video id. In this video link https://www.youtube.com/watch?v=KrSH82gg7BQ
, the id is KrSH82gg7BQ
.
Demo
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
0.2.3
3 months ago
0.2.2
3 months ago
0.2.1
10 months ago
0.2.0
10 months ago
0.1.7
10 months ago
0.1.10
1 year ago
0.1.11
1 year ago
0.1.20
12 months ago
0.1.9
1 year ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.8
2 years ago
0.1.4
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.0
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago