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

Installation

Install the plugin + required dependencies:

npm install --save svelte-plyr plyr rollup-plugin-postcss node-sass

Add postcss to your rollup.config.js (or webpack.config.js)

import postcss from 'rollup-plugin-postcss';

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
    postcss(),
  ]
};

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>