Нужно лениво загружать фреймы

Question

У меня есть отзывчивая видеостена, которая берет последние видео с канала YouTube и отображает их на странице. Мне нужно лениво загрузить фреймы.

Я дошел до того, что iframes лениво загружаются с отзывчивыми изображениями на месте их до щелчка. У меня проблема, независимо от того, что я делаю, когда вы нажимаете одно изображение для загрузки фрейма, все фреймы загружаются под оставшимися изображениями. Мне нужна отдельная миниатюра, чтобы активировать только iframe под ним. Я знаю, что на сайте есть похожие решения, поэтому, пожалуйста, не отмечайте их как дубликаты, так как эти решения не подходят для этого кода.

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

В данный момент я свободен от ошибок и пытался добавить классы и т. Д., Но цикл по-прежнему загружает все iframe, если вы щелкнете по любой миниатюре.

 <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

Сначала я бы порекомендовал больше не использовать jQuery для такого рода простых манипуляций с домом.

Чтобы исправить эту проблему, я бы рекомендовал создать элемент img вместо передачи строки для элемента cover, а затем просто привязать щелчок непосредственно к элементу img. Итак, ваши функции загрузки кадра выглядят примерно так:

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

      }
   );
} 

Answer 2

Все еще нет радости здесь.Приветствуются альтернативные предложения, если они позволяют извлекать из канала.