javascript - 嵌入YouTube视频:缩略图上的自定义Javascript操作

我正在使用自定义JavaScript缩略图嵌入youtube视频。如果操作正确，则页面应加载自定义缩略图，点击后应加载iframe youtube视频并自动开始播放。

我正在使用本教程进行引用:
A More Efficient Method for Embedding YouTube Videos

我是一名新手Web开发人员，但得到了一些错误的结果。当用户单击缩略图时，我设法加载了自定义缩略图并自动播放了相应的视频，但是该页面加载时在视频缩略图的左上角带有一个小的可见文件缩略图。

有人可以发现html或java的任何错误吗？我认为我的css部分是正确的，但为了方便起见，我也会添加它。

的HTML

<div class="youtube-container">
        <div class="youtube-player" id="yo" data-id="9jkx03pnMtg">
            <div>
                <img class="youtube-thumb" src="img/yo_thumbnail.png">
            <div class="play-button"></div>
            </div>
        </div>
    </div>

脚本

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "http://www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

的CSS

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

最佳答案

您不需要在html中包含img标记。这就是您在视频缩略图的一角看到的内容。

<img class="youtube-thumb" src="img/yo_thumbnail.png">

它是由javascript自动添加的:

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

关于javascript - 嵌入YouTube视频:缩略图上的自定义Javascript操作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34895903/