We tried implementing this thumbnail holder for better homepage speed (Supply Theme) but it doesn’t work.
We click and nothing happens. What is expected:
Youtube lightweight embed tool (surge.sh)
Jacques Hermes Everywhere with you - YouTube
.video {
position: relative;
width: 100%;
}
.video__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video__placeholder {
width: 100%;
position: absolute;
}
.video__youtube {
padding-bottom: 56.23%;
width: 100%;
height: 0;
overflow: hidden;
position: relative;
object-fit: cover;
background-color: black;
}
.youtube__button {
background: none;
border: 0;
cursor: pointer;
height: 100%;
left: 0;
position: absolute;
text-indent: -9999px;
top: 0;
transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 100%;
}
.youtube__button:before {
width:100%;
height:100%;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url([https://www.youtube.com/yt/about/media/images/brand-resources/icons/YouTube-icon_dark.svg](https://www.youtube.com/yt/about/media/images/brand-resources/icons/YouTube-icon_dark.svg)) no-repeat center center;
background-size: 10%;
}
.youtube__button:hover:before {
background: url([https://youtube.com/yt/about/media/images/brand-resources/icons/YouTube-icon-full_color.svg](https://youtube.com/yt/about/media/images/brand-resources/icons/YouTube-icon-full_color.svg)) no-repeat center center;
background-size: 10%;
}
