Plyr.js This component is released under a MIT license.
Examples: https://github.com/benwoodward/svelte-plyr/blob/master/src/App.svelte
npm install --save svelte-plyr plyr rollup-plugin-postcss node-sass
You may then begin to write a parent component that leverages the <Plyr> component:
components/YoutubePlyr.svelte
< script >
import { Plyr } from " svelte-plyr " ;
export let videoId ;
function logEvent ( event ) {
console . log ( event )
}
let player
</ script >
< div class = " youtube-plyr " >
< button on:click = {() = > player.play()}>PLAY </ button >
< button on:click = {() = > player.pause()}>PAUSE </ button >
< Plyr on:timeupdate = {logEvent} bind:player = {player} >
< div class = " plyr__video-embed " >
< iframe
src = " https://www.youtube.com/embed/ {videoId}?iv_load_policy=3 & modestbranding=1 & playsinline=1 & showinfo=0 & rel=0 & enablejsapi=1 "
allowfullscreen allowtransparency allow = " autoplay " >
</ iframe >
</ div >
</ Plyr >
</ div >
< style >
. youtube-plyr {
max-width : 800 px ;
}
</ style >
The <Plyr> component is equipped with all of Plyr's options ! Just pass them in as props. Example:
< Plyr autoplay = true muted = false / >
The <Plyr /> component can be configured to emit specified events. In this example, the logEvent function is called whenever the plyr.js emits the timeupdate logEvent event.
< script >
import { Plyr } from " svelte-plyr " ;
function logEvent ( event ) {
console . log ( event )
}
let player
let eventsToEmit = [ ' timeupdate ' ]
</ script >
< Plyr on:timeupdate = {logEvent} eventsToEmit = {eventsToEmit} bind:player = {player} >
// video embed code omitted
</ Plyr >
