Useful Links:
Video
Fixed height
Responsive height
Vimeo example
HTML
<!-- Fixed height -->
<div class="video_block" data-src="https://www.youtube.com/embed/m5Ii2sNvvAw">
<div class="video_img">
<img src="/img/play.png" class="play" alt="play">
<span class="img" style="background-image: url('https://i3.ytimg.com/vi/m5Ii2sNvvAw/maxresdefault.jpg')"></span>
<div class="overlay"></div>
</div>
</div>
<!-- Responsive height -->
<div class="video_block_responsive" data-src="https://www.youtube.com/embed/668nUCeBHyY">
<img src="/img/play.png" class="play_res" alt="play">
<img src="https://i3.ytimg.com/vi/668nUCeBHyY/maxresdefault.jpg" class="video_bg_res" alt="">
<div class="overlay_res"></div>
</div>
<!-- Vimeo example -->
<div class="video_block_responsive" data-src="https://player.vimeo.com/video/391365832">
<img src="/img/vimeo_play.png" class="play_res" alt="play">
<img src="https://vumbnail.com/391365832.jpg" class="video_bg_res" alt="">
<div class="overlay_res"></div>
</div>CSS
/* Fixed height */
.video_block{width:100%;max-width:100%}
.video_block .video_img{position:relative;display:block}
.video_block .video_img .img{display:block;height:35rem;width:100%;background-repeat:no-repeat;}
.video_block .video_img .play{position:absolute;top:50%;left:50%;z-index:3;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:9rem;height:auto;cursor:pointer}
.video_block .video_img .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:block;cursor:pointer;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;background:rgba(0,0,0,0.5)}
.video_block .video_iframe{height:35rem;width:100%;display:none}
.video_block.video_play .video_iframe{display:block}
.video_block.video_play .video_img{display:none}
/* Responsive height */
.video_block_responsive{position:relative;overflow:hidden;width:100%;padding-top:62.265%}
.video_block_responsive .video_iframe_res{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%}
.video_block_responsive .video_bg_res{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.video_block_responsive .play_res{position:absolute;top:50%;left:50%;z-index:3;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:9rem;height:auto;cursor:pointer}
.video_block_responsive .overlay_res{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:block;cursor:pointer;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;background:rgba(0,0,0,0.5)}
.video_block_responsive.video_play .play_res,.video_block_responsive.video_play .overlay_res,.video_block_responsive.video_play .video_bg_res{display:none}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.video_block .video_img:hover .overlay,.video_block_responsive:hover .overlay_res{background:rgba(0,0,0,0.2)}
.video_block .video_img:hover .play,.video_block_responsive:hover .play_res{-webkit-transform:translate(-50%,-50%) scale(0.8);-moz-transform:translate(-50%,-50%) scale(0.8);-ms-transform:translate(-50%,-50%) scale(0.8);-o-transform:translate(-50%,-50%) scale(0.8);transform:translate(-50%,-50%) scale(0.8)}
}
@media only screen and (max-width: 992px) {
.video_block .video_img .play, .video_block_responsive .play_res {width: 6rem;}
}SCSS
/* Fixed height */
.video_block {
width: 100%;
max-width: 100%;
.video_img {
position: relative;
display: block;
.img {
display: block;
height: 35rem;
width: 100%;
background-repeat: no-repeat;
}
.play {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transition: .3s;
transform: translate(-50%, -50%);
display: block;
width: 9rem;
height: auto;
cursor: pointer;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: block;
cursor: pointer;
transition: .3s;
background: rgba(0, 0, 0, 0.5);
}
}
.video_iframe {
height: 35rem;
width: 100%;
display: none;
}
&.video_play {
.video_iframe {
display: block;
}
.video_img {
display: none;
}
}
}
/* Responsive height */
.video_block_responsive {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.265%;
.video_iframe_res {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.video_bg_res {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.play_res {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transition: .3s;
transform: translate(-50%, -50%);
display: block;
width: 9rem;
height: auto;
cursor: pointer;
}
.overlay_res {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: block;
cursor: pointer;
transition: .3s;
background: rgba(0, 0, 0, 0.5);
}
&.video_play {
.play_res, .overlay_res, .video_bg_res {
display: none;
}
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.video_block .video_img:hover .overlay, .video_block_responsive:hover .overlay_res {
background: rgba(0, 0, 0, 0.2);
}
.video_block .video_img:hover .play, .video_block_responsive:hover .play_res {
transform: translate(-50%, -50%) scale(0.8);
}
}
@media only screen and (max-width: 992px) {
.video_block .video_img .play, .video_block_responsive .play_res {width: 6rem;}
}JavaScript
// Fixed height
$('.play, .overlay').click(function () {
var parent = $(this).closest('.video_block'),
src = parent.data('src'),
html = '<iframe class="video_iframe" src="' + src + '?autoplay=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>';
parent.addClass('video_play');
parent.append(html);
});
// Responsive height
$('.play_res, .overlay_res').click(function () {
var parent = $(this).closest('.video_block_responsive'),
src = parent.data('src'),
html = '<iframe class="video_iframe_res" src="' + src + '?autoplay=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>';
parent.addClass('video_play');
parent.append(html);
});