JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.11/plyr.css">
<div class="main-hero__youtube__video">
  <div data-type="vimeo" data-video-id="143418951"></div>
</div>

JavaScript

if ($('.main-hero__youtube__video').length) {
		console.log("Video player init");
		// Define the controls
		var plyr_options = {
	        autoplay: true,
			clickToPlay: true,
			showPosterOnEnd: true,
			controls: ['mute','progress','play']
	    };

		// Create the plyr instances - this defines players[0] as our primary player.
		var players =  plyr.setup(plyr_options);

		players[0].on('pause', function(event) {
		  console.log("test");
		});

	}