Need to lazy load iframes

Question

I have a responsive video wall that takes the latest videos from a youtube channel and displays them on the page. I need to lazy load the iframes.

I have got it to the point where the iframes lazy load with responsive images in the place of them until clicked. The issue I have is no matter what I do, when you click one image to load an iframe, all the iframes load up beneath the remaining images. I need the individual thumbnail to trigger the iframe below it only. I know there are similar solutions on the site, so please don't mark as duplicate, as those solutions are not suitable for this code.

https://codepen.io/anon/pen/mZWZOe

I am error free at the moment, and have tried adding classes etc, but the loop still loads all iframes if you click any thumbnail.

 <style>    
 body {
  background: -webkit-radial-gradient(rgb(248, 248, 248), rgb(129, 171, 212));
  background: radial-gradient(rgb(248, 248, 248), rgb(129, 171, 212));
}

.youtubevideowrap{
width: 80%;
max-width: 640px;
margin: 0 auto 20px;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container     embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
     .covers{
     position:relative;
     width:100%;
     top:-50px;
}
</style> 


<div class="youtubevideowrap">
<div class="video-container">
<iframe class="latestVideoEmbed" cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
 </div>
</div>  
<div class="youtubevideowrap">
<div class="video-container">   
<iframe class="latestVideoEmbed" vnum='1' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>
</div>
 <div class="youtubevideowrap">
<div class="video-container">
<iframe class="latestVideoEmbed" vnum='2' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
 </div>
</div>  
<div class="youtubevideowrap">
<div class="video-container">   
<iframe class="latestVideoEmbed" vnum='3' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>
</div>
 <div class="youtubevideowrap">
<div class="video-container">
<iframe class="latestVideoEmbed" vnum='4' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
 </div>
</div>  
<div class="youtubevideowrap">
<div class="video-container">   
<iframe class="latestVideoEmbed" vnum='5' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>
</div>



<script>
var reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=");
function loadVideo(iframe){
    $.getJSON( reqURL + iframe.getAttribute('cid'),
      function(data) {
     var videoNumber = (iframe.getAttribute('vnum')?        Number(iframe.getAttribute('vnum')):0);
        console.log(videoNumber);
     var link = data.items[videoNumber].link;
     id = link.substr(link.indexOf("=") + 1);  
    $(iframe).parent().append( "<img class='covers' src='https://img.youtube.com/vi/"+id + "/0.jpg'>" );
    $(iframe).attr('vid', ''+id);
    $('.covers').click(function(){
        $(this).css("display","none");
        var vid = (iframe.getAttribute('vid'));
    $(iframe).attr("src","https://youtube.com/embed/"+vid + "?rel=0&autoplay=1&autohide=1&modestbranding=1"); });

  }
   );
} 
var iframes = document.getElementsByClassName('latestVideoEmbed');
for (var i = 0, len = iframes.length; i < len; i++){
   loadVideo(iframes[i]);
}
</script>

Answer 1

Still no joy here. Alternative suggestions welcome as long as it allows for the pulling from a channel.

Answer 2

First I would recommend to not use jQuery for this kind of simple dom manipulation anymore.

To fix this issue, I would recommend to create an img element instead of passing in a string for the cover element and then simply bind the click directly to the img element. So your load frame functions looks something like this:

function loadVideo(iframe){
    $.getJSON( reqURL + iframe.getAttribute('cid'),
      function(data) {
         var videoNumber = (iframe.getAttribute('vnum')?Number(iframe.getAttribute('vnum')):0);
        console.log(videoNumber);
         var link = data.items[videoNumber].link;
         id = link.substr(link.indexOf("=") + 1);  

        // Create Element
        const coverImg = document.createElement('img');
        coverImg.classList.add('covers')
        coverImg.setAttribute('src', 'https://img.youtube.com/vi/' + id +   '/0.jpg')


        $(iframe).parent().append(coverImg); // Append the new element
        $(iframe).attr('vid', ''+id);
        $(coverImg).click(function(evt){ //Bind the click directly to the new cover image element
            $(this).css("display","none");
            var vid = (iframe.getAttribute('vid'));
        $(iframe).attr("src","https://youtube.com/embed/"+vid + "?rel=0&autoplay=1&autohide=1&modestbranding=1"); });

      }
   );
}