Youtube embed iframe 显示黑色 iframe 片刻答案

【问题标题】：Youtube embed iframe show black iframe for a momentYoutube embed iframe 显示黑色 iframe 片刻
【发布时间】：2023-04-09 04:38:01
【问题描述】：

我需要使用 YouTube iframe api 在我的页面上嵌入一些视频。

在我的代码中，当用户单击“添加视频”按钮时，我需要添加 iframe 的仲裁编号。

出于技术原因（在我的真实应用代码中），我需要使用 innerHTML 属性添加此代码。

我知道更改innerHTML 会导致出现黑色短暂延迟，正如您在现场示例中多次按下“添加视频”按钮所看到的那样。

我想知道是否有办法在不改变innerHTML 的使用的情况下最大限度地减少黑色短延迟。

现场演示 https://jsbin.com/kififenequ/edit?html,output

(function (window) {
    document.addEventListener('DOMContentLoaded', event => {
        let html = '<iframe width="640" height="360" src="https://www.youtube.com/embed/jm0lzLHxauY?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>';

        let fragmentFromString = function (strHTML) {
            return document.createRange().createContextualFragment(strHTML);
        }

        let elmVideos = document.getElementById('videos');
        let elmBtnInsert = document.getElementById('btn-insert');

        elmBtnInsert.addEventListener('click', event => {
            elmVideos.innerHTML += html; // I CANNOT CHANGE THIS
        });
    });
})(window);

【问题讨论】：

标签： javascript html css iframe youtube

【解决方案1】：

innerHTML 不是黑色闪烁的原因。你甚至可以直接在浏览器中打开 iframe url 看到：https://www.youtube.com/embed/jm0lzLHxauY?rel=0&controls=0

预览图像只是需要一些时间来加载，你为什么这么烦恼呢？您可以做的是添加 iframe 不可见，等待 iframe 的加载事件，然后显示它。但我认为没有任何事情发生比一点点黑色闪烁更糟糕。（此外，不能保证这会起作用，具体取决于 YouTube 播放器加载图像的方式，我没有调查）

【讨论】：