JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<script src="https://cdn.plyr.io/3.2.4/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.2.4/plyr.css">
<div class="container">
  <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="100%">

            </video>

</div>

CSS

/* This is purely for the demo */

.container {
  max-width: 800px;
  margin: 0 auto;
}

.plyr {
  border-radius: 4px;
  margin-bottom: 15px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
  const player = new Plyr(document.querySelector('#player'));
});