Youtube嵌入iframe显示黑色iframe片刻

Question

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

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

出于技术原因(在我的实际应用程序代码中)，我需要使用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);

Answer 1

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

预览图像只是需要一些时间来加载，你为什么会为此烦恼呢？您可以做的是添加iframe不可见，等待iframe的load事件，然后显示它。但我认为没有什么事情比一点点黑色闪动更糟糕。(而且，也不能保证这会起作用，这取决于YouTube播放器加载图像的方式，我没有看过)