javascript - 动态地将嵌入的 YouTube 视频添加到页面

Question

我已经浏览了针对该主题建议的现有帖子，但似乎没有一个帖子专门解决了我正在寻找的内容。

我有一个包含大量嵌入式 YouTube 视频的页面，在快速连接下加载该页面需要一分多钟的时间 - 在慢速连接上几乎需要永远。

我一直在研究灯箱方法，但大多数都需要将对象(图像、视频)编码到页面中，然后更改 CSS 以使其在单击链接时可见。我想要做的是对链接(文本或图像)和用于创建灯箱效果的周围 div 进行硬编码，然后在单击链接时创建嵌入视频的代码。

类似这样的事情:

<div class="wrapper">
    <a href="videos.php" onclick="myFunction(*youtube id*); return false;">Video #1</a>
    <div class='lightboxOverlay hidden'>   //div is hidden
        <div class='lightboxContent'>
            // Javascript writes code for embedded video here,
            // then makes the parent div visible
        </div>
    </div>
</div>

我会使用“getElementByID(div id).innerHTML="CodeForVideo”，但有多个视频，因此我无法仅定位一个视频被点击了。

是否有任何方法可以针对所选视频的 div 并仅在该 div 中编写代码，或者是否有更好的方法来实现此目的？

<小时/>

感谢您的快速回复，@Davidlrnt!但是，该网站必须保持向后兼容，并且 Youtube API 仅适用于兼容 HTML5 的浏览器。

我尝试过这个:

<div class="thumbnail">
    <a href="videos.php" onclick="vLightbox(Rt87CBUBlCo); return false;"><img src="images/thumbnails/20160828.jpg" /></a>
    <div class='lbOverlay hidden'>
        <div id="Rt87CBUBlCo" class='lbContent'>
        </div>
    </div>
</div>

function vLightbox(YoutubeID){
    document.getElementById(YoutubeID).innerHTML = '<iframe width="420" height="315" src="https://www.youtube.com/embed/' + youTubeID + '-ZnkxjjymsU?rel=0" frameborder="0" allowfullscreen style="float:right; margin-left:20px;"></iframe>';
}

但没有成功。我一定错过了一些东西......

Answer 1

您需要使用 youtube iframe api，并且可以通过视频 ID 动态嵌入任何视频。

https://developers.google.com/youtube/iframe_api_reference

函数 onYouTubeIframeAPIReady() { 玩家 = new YT.Player('玩家', { 高度:'390'， 宽度:'640'， 视频 ID: 'M7lc1UVf-VE', 事件:{ 'onReady': onPlayerReady, 'onStateChange':onPlayerStateChange } }); }