Question

我有一个自适应视频墙，可以从youtube频道获取最新视频，并将其显示在页面上。我需要延迟加载iframe。

我已经到了iframe延迟加载响应图像的位置，直到它们被点击为止。我遇到的问题与我所做的无关，当您单击一个图像以加载iframe时，所有iframe都将加载到其余图像下方。我只需要单个缩略图即可触发其下方的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

这里仍然没有喜悦。只要它允许从渠道中拉出，也欢迎其他建议。

Answer 2

首先，我建议不要再将jQuery用于这种简单的dom操作。

要解决此问题，我建议创建一个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"); });

      }
   );
}

需要延迟加载iframe

2 个答案: