时间戳

首页 > 解决方案 > 我的 YouTube 嵌入无法在我的网站上运行

html - 我的 YouTube 嵌入无法在我的网站上运行

问题描述

My Page

这是我的嵌入式代码，我尝试让 YouTube 视频自动更新

<div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item1" vnum='0' cid="UC96WWrjtdDu1kKQztFJoqWg" width="600" height="340" frameborder="0" allowfullscreen></iframe>

        <iframe class="embed-responsive-item2" vnum='1' cid="UC96WWrjtdDu1kKQztFJoqWg" width="600" height="340" frameborder="0" allowfullscreen></iframe>

        <iframe class="embed-responsive-item3" vnum='2' cid="UC96WWrjtdDu1kKQztFJoqWg" width="600" height="340" frameborder="0" allowfullscreen></iframe>

        <iframe class="embed-responsive-item4" vnum='3' cid="UC96WWrjtdDu1kKQztFJoqWg" width="600" height="340" frameborder="0" allowfullscreen></iframe>
    </div>

标签： htmlyoutubeembed

解决方案

我让它通过包含 JavaScript 在您的页面上提供最新视频。我在这篇文章中找到了它：

https://codegena.com/auto-embed-latest-video-youtube-channel/

你可以在 Codepen 上看到它：

https://codepen.io/St3ph3n92/pen/rNONYMN?editors=1010

    const 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) {
             let videoNumber = (iframe.getAttribute('vnum')? 
   Number(iframe.getAttribute('vnum')):0);
        console.log(videoNumber);
         let link = data.items[videoNumber].link;
         id = link.substr(link.indexOf("=") + 1);  
         iframe.setAttribute("src","https://youtube.com/embed/"+id + "? 
        controls=0&autoplay=1");
        }
      );
    }
    let iframes = document.getElementsByClassName('latestVideoEmbed');
    for (let i = 0, len = iframes.length; i < len; i++){
           loadVideo(iframes[I]);
    }

请注意，您还需要包含 jquery 库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您打算避免使用 JavaScript，在上面提到的同一篇文章中，可以选择使用此 iframe 嵌入：

<iframe width="600" height="340" src="https://www.youtube.com/embed?max-results=1&controls=0&showinfo=0&rel=0&listType=user_uploads&list=YOUR_CHANNEL_NAME_HERE" frameborder="0" allowfullscreen></iframe>

我希望这有帮助。

推荐阅读