add video shortcode (#289)

* add video shortcode

* Use "sampotts/plyr" library instead of "clappr/clappr"

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

layouts/partials/header.html

@@ -22,6 +22,7 @@
 <link rel="stylesheet" href="{{ "/css/layouts/main.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/navigators/navbar.css" | relURL }}"/>
+<link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
 
 <!--=================== cdn ==============================-->
 <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">

layouts/partials/scripts.html

@@ -1,6 +1,7 @@
-<script src="{{ "/js/jquery-3.4.1.min.js" | relURL }}"></script>
-<script src="{{ "/js/popper.min.js" | relURL }}"></script>
-<script src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/jquery-3.4.1.min.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/popper.min.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
 
-<script src="{{ "/js/navbar.js" | relURL }}"></script>
-<script src="{{ "/js/main.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/navbar.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>

layouts/shortcodes/video.html

@@ -0,0 +1,13 @@
+{{ $src := .Get "src" }}
+{{ $type := .Get "type" }}
+{{/*
+  A page can have multiple videos. We need to generate unique id for them.
+  Here, we are generating a sequence from 1 to 200 and taking the first element after a shuffle.
+  This will give a random number in most cases. However, if the page has many videos, we might have a collision.
+  We should find a better approach for doing this.
+*/}}
+{{ $randNumber :=  index (seq 200 | shuffle) 0 }}
+
+<video class="video-player" id="video-{{ $randNumber }}" playsinline controls>
+  <source src="{{ $src }}" type="{{ $type | default "video/mp4" }}" />
+</video>

static/js/main.js

@@ -72,6 +72,16 @@ var isMobile = false, isTablet = false, isLaptop = false;
     }
     addSmoothScroll();
 
+    // ===================== Video Player ==================
+    function renderVideoPlayer(){
+      var videos = document.getElementsByClassName("video-player");
+      for (var i =0; i< videos.length; i++ ){
+        const player = new Plyr("#"+videos[i].id);
+      }
+
+    }
+    renderVideoPlayer();
+
     // re-render custom functions on window resize
     window.onresize = function () {
       detectDevice();