Return to Revisions

Put the script after the html instead of before (in /components/com_jcomments/tpl/default/tpl_comment.php).

If 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).

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.

Here's the css used if anyone wants to keep their videos around 400px wide, it's a little different than the source.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
    padding: 0 20px;
}

.youtube {
    background-color: #000;
    margin-top: 0px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: -16.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;
}