Videos Player

HTML5 Video Player

<div class="rounded-3 mb-5 overflow-hidden shadow-lg position-relative">
  <video poster="./assets/videos/officeloop-cover.jpg" class="player w-100 h-100 d-block" playsinline controls preload="none">
   <source src="./assets/videos/officeloop.mp4" type="video/mp4">
  </video>
</div>
Youtube video player

<!--Youtube video player-->
<div class="rounded-3 mb-5 overflow-hidden shadow-lg position-relative">
 <div class="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</div>
Vimeo Video Player

<!--Vimeo video player-->
<div class="rounded-3 mb-5 overflow-hidden shadow-lg position-relative">
 <div class="player" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
</div>
Required Css and Js for Plyr
CSS - Copy code and paste into page head tag 

<!--Plyr Css-->
<link rel="stylesheet" href="assets/vendor/node_modules/css/plyr.css">
<!--Theme Css (Includes plyr custom css (_plyr.scss))-->
<link href="assets/css/theme.min.css" rel="stylesheet">
JS - Copy code and paste into page before end of body tag 

<!--Plyr JS-->
<script src="assets/vendor/node_modules/js/plyr.min.js"></script>
<!--Init Plyr JS-->
<script>
    var player = document.querySelectorAll('.player')
    player.forEach(function (el) {
        new Plyr(el);
    })
</script>

Learn More about Plyr

Let's start building stunning websites

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.