JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.plyr.io/2.0.15/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.15/plyr.css">
<div id='plyr-youtube' data-type="youtube" data-video-id="_3HkoreYzWQ"></div>

/*HTML5 video*/
<video id="plyr-video" poster="/path/to/video-poster.png" controls>
  <source src="https://www.youtube.com/watch?v=_3HkoreYzWQ" type="video/mp4">
  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/video-caption.vtt" srclang="en" default>
</video>

JavaScript

plyr.setup("#plyr-youtube");

plyr.setup("#plyr-video");