JSFiddle - React, Tailwind, and code Playground

by SL_A_SH

HTML

<link rel="stylesheet" href="https://cdn.plyr.io/3.4.8/plyr.css">
<script src="https://cdn.plyr.io/3.4.8/plyr.js"></script>
<div class="plyr__video-embed" id="player">
    <iframe src="https://www.youtube.com/embed/9C1leq--_wM??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>

CSS

.container {
	margin: 20px auto;
	max-width: 500px;
}

.plyr__video-embed iframe {
	top: -50%;
	height: 200%;
}

JavaScript

const player = new Plyr('#player', {});

// Expose player so it can be used from the console
window.player = player;