svelte-plyr

A Svelte 3 component-wrapper for 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: 800px;
}
</style> 

Props

The <Plyr> component is equipped with all of Plyr's options! Just pass them in as props. Example:

<Plyr autoplay=true muted=false />

Events

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>