.youtube-dummy{
position: relative;
overflow: hidden;
display: block;
}
.youtube-dummy::after{
content: '';
display: block;
padding-top: 56.25%;
}
.youtube-dummy > div, 
.youtube-dummy > iframe{
position: absolute;
top: 0!important;
left: 0!important;
width: 100%!important;
height: 100%!important;
margin: 0 auto!important;
}
.youtube-dummy .youtube-dummy__img{
width: 100%;
height: 100%;
object-fit: cover;
}
.youtube-dummy .youtube-dummy__img-wrapper{
cursor: pointer;
}
.youtube-dummy .youtube-dummy__img-wrapper::before{
content: '';
position: absolute;
width: 68px;
height: 48px;
transform: translate3d(-50%,-50%,0);
top: 50%;
left: 50%;
z-index: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: -webkit-filter .1s cubic-bezier(0,0,.2,1);
transition: -webkit-filter .1s cubic-bezier(0,0,.2,1);
transition: filter .1s cubic-bezier(0,0,.2,1);
transition: filter .1s cubic-bezier(0,0,.2,1),-webkit-filter .1s cubic-bezier(0,0,.2,1);
}
.youtube-dummy .youtube-dummy__img-wrapper:hover::before{
-webkit-filter: none;
filter: none;
}
.youtube-dummy > iframe{
z-index: 1;
}
.youtube-dummy > iframe ~ div{
display: none;
}
.youtube-dummy .youtube-dummy__img{
margin: 0!important;
}