Skip to content

GitLab

Commit 50a115b5 authored by nursultan's avatar nursultan
Browse files

added video preview for youtube widget

parent 8ce56221
Hide whitespace changes
Inline Side-by-side
assets/css/main.css
View file @ 50a115b5
......@@ -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
View file @ 50a115b5
......@@ -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
View file @ 50a115b5
......@@ -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
View file @ 50a115b5
......@@ -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
View file @ 50a115b5
......@@ -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
View file @ 50a115b5
......@@ -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">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment