<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.svg" />
<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<div class="video">
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
<source src="/path/to/video.mp4" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>
</div>
<script>
const player = new Plyr('#player');
</script>
