added video preview for youtube widget

assets/css/main.css

@@ -385,6 +385,13 @@ object {
     background-color: #fff;
 }
 
+.video-container{
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+
 .video-preview, .statistic-preview {
     height: 700px;
     display: flex;
@@ -447,15 +454,37 @@ object {
     bottom: 0;
 }
 
-.video-preview iframe {
+.video-preview iframe, .video-container--preview {
     height: calc(100% - 240px);
     margin: auto;
-    position: absolute;
+    position: relative;
     box-shadow: 0 4px 10px #A5161E;
     border-radius: 20px;
     border: 4px solid #DE232E;
     z-index: 1;
 }
+.playbutton {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left:-38px;
+    margin-top:-38px;
+    z-index: 999;
+}
+.video-container a img.playbutton {
+    visibility: hidden;
+    content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAQAAABJACE7AAAEvklEQVR4AdyYX0hbVxzHv5CH4kMZVUighTLxKXmMCBGF/MKC26Qy5x6njMEsGCgU8zBQygaDsJVC2IOCoIPhAqtjbFxmXsJl4EPgPpSGhTDSQDPXEbUNRSpGZ/6cwSHk5MaYa8498WGf39sVrt/c8/vz/R38X+mDE4PwwAsfxuEHwY9x+OCFB4Nwog9XjgMuuDEKsoxRuOGCA1fCADwg8Jic2VwyNvKJYvq4cHZULbNatXx2dFwopvMJY2NzaXKmIdGDAfSUWxgB/1cri5mtN8+ZJW+eZ7ZWFuvyRnALPeEmfCDQwmwqVjpgXVE6SMUWZrk8H25CKTfgBYEioV2dSbOrR0Jcnhc3oIgh8K+VTzDb5BP1rzcE21zHMAhkbLC2HD7Lanp0NRyaG5vqDzoC/cGxqdDcaliPZrXDZ6wtxgYXN4zrsIELftDyfDHNzvFiR4tMTIM6xcS0Fnmxw85RTC/P8x7ogiS3QaD4Q1ZrSeq95JpZlJXA5Fppj5mpxR/yv96GBIMgUCrGTJy81KMgmdCjJy+ZiVSM/2VQSlgu3voyZxAkG85g6w/NxbsXx48ynzAn/KN7ILvx6J65OPKJ7o7Vdf6L5bavBUAq4logt93my7ku1y78rTlmrINUhrF+Luf8l2klw7wqm5BMfIuiYE3wah2+ROdfnmc1eWFS4mq8zw11npUEKqZlj1L+WItp/qzDbPWaR1JuG9TLyG23jC/vxbaHFmab24X9qrSq1uZWwgf/BZbJZ+5lEn1Mos+19DhfewdLkZC5pC+KfeP+J4rEmdoU93NtnPAIaFcXs7LTSGKsWvnz1/c+VCHNGRSzdVfnNr2FAZFn1i2DccolY/3td9W2EZ5vAzDhaf60pb3OL2t2/T9/5bBdLKU9Uxp5zHslgcQyklyzliZ4neE5YiOSa+Kn8icO00BfWWQNrIwia6X29++ffSwvbWKaNVhZNA97NyizJaw1qCtpnEo5/Xjkjqw4YdMzWyC40WAUJBZeLSIhjfPvoR596x0ZaVpELNUgjIpLFZqcMR2npDT+6r+++9zekfLriD5wnKDNJTGeQHLSBK+ecifRVYiRtbkEgrOxB4ihntXkpQmqtVz8zkfdSMtqYtCLfcHTPDv1qH1pMi1Zj4pZKnqbt9mjrYZVSBN96revL+dfVsMm7+ZtOI7jAqsTmlMlTWTvt/et3xmaY3WOC8KBjIPOjlidsSnF0jj/7Fi15LEpVufsCIRxcPygapnV6Q/alybTkvuDjRIq8w2LQyCxqDgCvZFWrWU1+uDidzoCYuzxJ1f11V5nvrgLEmH91Xqfa3x8xb/hVSqRaz2rUO6Gf+EZJlGhvetr4oqP5PtaT6bBaVGLiJKSnQbKZ2i1kvlJHKP8DFXuPF49DX8Ksu88FPu106JYY+z7NWUut1L+40f3+yAVLlfpbnDwhG/0yncDmxtV6eDxlyD1G5XNPbRSTv0gjlH9Hiq9ve8bd2dB6rd3m3cepf3YA1Bv7zwkbooqp0++F75f/U2R9P1aIck965Xdr/3XrB0IAAAAMAzyt06jY3zFr2T95T4P+N8N/tryN6q67MU9tK7ITXv/xcLvPH4d85uiWmLlfq1Wf7mVfIVp4HIDzfwP/+fzW/C0yiYAAAAASUVORK5CYII=")
+}
+.video-container a:hover .playbutton {
+    visibility: visible;
+}
+
+.video-container--preview {
+    top: 0;
+    left: 0;
+    width:815px;
+    height:auto;
+}
 
 .statistic-preview {
     flex-direction: column;

assets/css/media.css

@@ -204,7 +204,7 @@
         padding-bottom: calc((100vw - 769px) / (1024 - 769) * (130 - 15) + 15px);
     }
 
-    .video-preview iframe {
+    .video-preview iframe, .video-container--preview  {
         width: calc((100vw - 769px) / (1024 - 769) * (815 - 700) + 700px);
     }
 
@@ -457,7 +457,7 @@
         margin: auto;
     }
 
-    .video-preview iframe {
+    .video-preview iframe, .video-container--preview  {
         width: calc((100vw - 426px) / (768 - 426) * (700 - 400) + 400px);
     }
 
@@ -603,7 +603,7 @@
         line-height: 27px;
     }
 
-    .video-preview iframe {
+    .video-preview iframe, .video-container--preview  {
         width: 80%;
         height: 250px;
     }

assets/js/script.js

@@ -151,3 +151,21 @@ if (window.innerWidth <= 425) {
         })
     }
 }
+function setAttributes(el, attrs) {
+    Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
+}
+
+document.querySelector('.video-container').addEventListener( 'click', function(e){
+    e.preventDefault();
+    document.querySelector('.playbutton').style = "visibility:hidden";
+    let imgURL = this.querySelector("img").getAttribute('src');
+    let rx = /\/vi\/([^\/]+)/;
+    let arr = rx.exec(imgURL);
+    let url = "//www.youtube.com/embed/"+arr[1]+"?rel=0&autoplay=1";
+    this.querySelector("img").style = "display: none";
+    let iframe = document.createElement("iframe");
+    setAttributes(iframe, {"src": url, "width": "815", "height": "100%", "frameborder" : "0", "allowfullscreen" : "allowfullscreen" });
+    this.append(iframe);
+
+});
+

en.hbs

@@ -44,9 +44,13 @@
     <!-------------  preview section start  ---------------------->
     <section id="preview">
         <div class="video-preview">
-            <iframe width="815" loading="lazy" src="https://www.youtube.com/embed/-7s9vGzNn_o" frameborder="0"
-                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
             <span></span>
+            <div class="video-container">
+                <a style="position: relative; left: 0; top: 0; z-index: 99" href="https://www.youtube.com/embed/-7s9vGzNn_o">
+                    <img src="//img.youtube.com/vi/-7s9vGzNn_o/0.jpg" class="video-container--preview"/>
+                    <img class="playbutton"/>
+                </a>
+            </div>
         </div>
         <div class="statistic-preview" id="statistic">
             <p class="statistic-preview--title">

index.hbs

@@ -46,10 +46,13 @@
     <!-------------  preview section start  ---------------------->
     <section id="preview">
         <div class="video-preview">
-            <iframe width="815" loading="lazy" src="https://www.youtube.com/embed/egbaNwmRCNA" frameborder="0"
-                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-            </iframe>
             <span></span>
+            <div class="video-container">
+                <a style="position: relative; left: 0; top: 0; z-index: 99" href="https://www.youtube.com/embed/egbaNwmRCNA">
+                    <img src="//img.youtube.com/vi/egbaNwmRCNA/0.jpg" class="video-container--preview"/>
+                    <img class="playbutton"/>
+                </a>
+            </div>
         </div>
         <div class="statistic-preview" id="statistic">
             <p class="statistic-preview--title">

kz.hbs

@@ -45,8 +45,12 @@
     <!-------------  preview section start  ---------------------->
     <section id="preview">
         <div class="video-preview">
-            <iframe width="815" loading="lazy" src="https://www.youtube.com/embed/IIuRFToaVwU" frameborder="0"
-                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <div class="video-container">
+                <a style="position: relative; left: 0; top: 0; z-index: 99" href="https://www.youtube.com/embed/IIuRFToaVwU">
+                    <img src="//img.youtube.com/vi/IIuRFToaVwU/0.jpg" class="video-container--preview"/>
+                    <img class="playbutton"/>
+                </a>
+            </div>
             <span></span>
         </div>
         <div class="statistic-preview" id="statistic">