Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
nursultan
faceplate-landing-theme
Commits
50a115b5
Commit
50a115b5
authored
Jul 20, 2020
by
nursultan
Browse files
added video preview for youtube widget
parent
8ce56221
Changes
6
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:
absolut
e;
position:
relativ
e;
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"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment