JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.1.0/plyr.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/plyr/3.1.0/plyr.css" />

<video id="player" controls data-plyr-config='{ "title": "This is an example video", "volume": 1, "debug": true }'>
  </video>

<script>

var controls =
[
    'play', // Play/pause playback
    'current-time', // The current time of playback
    'duration', // The full duration of the media
    'fullscreen' // Toggle fullscreen
];

const player = new Plyr('#player', { controls });
console.log('player',player);
player.on('pause', event => {
console.log('ready', event);
        });


player.source = {
    type: 'video',
    sources: [{
      src: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ', // From the YouTube video link
      provider: 'youtube',
    }, ],
  };
</script>