JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css">
<div class="players">
  <div class="plyr__video-embed youtube" id="player1">
    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
  </div>

  <div class="plyr__video-embed youtube" id="player2">
    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
  </div>
</div>

CSS

.players {
  max-width: 480px;
  margin: 0 auto;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
	const players = [...document.querySelectorAll('.youtube')].map(s => new Plyr(s));
  
  players.forEach(player => {
  	// Listen for play event on all players
  	player.on('play', event => {    	
    	players
      	// Find the players that aren't the one just played
      	.filter(p => p.id !== event.detail.plyr.id)
        // Pause them
        .forEach(p => p.pause());
    });
  })
});