Video lazy loading skipping first video in every list

Question

I'm using code found here:

https://codepad.co/snippet/CtLEQDKX

to lazy load the preview image for youtube videos within JComments. I have it working pretty good and looking like I want it to and it saves a massive amount of data from being unnecessarily downloaded, but for some reason the first video always gets skipped and left with no image and is unclickable. The rest work just as they're supposed to.

I have two sections the comments appear on, the other is a custom made profile page and is separate from JComments, and the same thing happens to the first video on the lists there as well. Any thoughts on why this is happening?

Here is js being used on site:

<script>
( function() {

    var youtube = document.querySelectorAll( ".youtube" );

    for (var i = 0; i < youtube.length; i++) {

        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/hqdefault.jpg";

        var image = new Image();
            image.src = source;
            image.addEventListener( "load", function() {
                youtube[ i ].appendChild( image );
            }( i ) );

        youtube[i].addEventListener( "click", function() {

            var iframe = document.createElement( "iframe" );
                iframe.setAttribute( "frameborder", "0" );
                iframe.setAttribute( "allowfullscreen", "" );
                iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

            this.innerHTML = "";
            this.appendChild( iframe );
        } );    
    };

} )();
</script>

This is what the html looks like in custom bbcode, identifier is stripped out from pattern.

Pattern:

[youtube]https://www.youtube.com/watch?v={IDENTIFIER}[/youtube]

HTML:

<center>
<div class="wrapper">
<div class="youtube" data-embed="{IDENTIFIER}">
<div class="play-button"></div>
</div></div></center>

and the profile str_replace is in 2 arrays, but looks like this

...., "https://www.youtube.com/watch?v=", "[youtube]", "[/youtube]",.....

replaced by

...., "", '<center><div class="wrapper"><div class="youtube" data-embed="', '"><div class="play-button"></div></div></div></center>',.....  

Extra info J! 3.9.1 PHP 7.1.25 OS Linux I JComments 3.0.7

Answer 1

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;
}