<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> <!------ Include the above in your HEAD tag ----------> <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>

.video{ width: 500px; height: 250px; margin: 1rem auto; }