Tip, ifIf only half of the preview images show up and the rest are stock youtube images, change the image source in the javascript to hqdefault.jpg (instead of sddefault.jpg from code source).
This also creates an odd effect on some mobile versions of chrome, and maybe others not tested, where the image duplicates multiple times. Works for the safari and firefox mobile versions tested though. Worth the trade off for me, tested with 22 videos on page, 7-8mb page loads (pingdom) vs under 1mb (739kb) for the same content. My guess is the image source may have something to do with it, maybe change to lowest quality image source (mqdefault.jpg). A small group of browsers and too many different ones users can use instead for me to sacrifice the quality that much, as it also displays low quality image on desktop views.
An option to load content on click for bootstrap collapse would have been a better solution in my case, but as far as I can see it is not available.
.wrapper {
max-width: 400px;
margin: 0 auto;
padding: 0 20px;
}
.youtube {
background-color: #000;
margin-top: -30px;0px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -816.82%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 20px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}