youtube - YouTube今天是否在control = 2参数上引入了错误？

多年来，我一直在使用文档描述的嵌入带有control = 2参数的iframe。
https://developers.google.com/youtube/player_parameters

今天7/20/17，所有占位符的缩略图已停止显示。

我仍然可以在生成的CSS代码中以背景图片网址看到缩略图。缩略图虽然不显示。

因此，回顾一下以下内容仍显示缩略图

<iframe width="560" height="315" src="https://www.youtube.com/embed/1sO5OKez0JQ?rel=0&amp;controls=1" frameborder="0" allowfullscreen></iframe>

将control的值更改为2，不再显示缩略图

<iframe width="560" height="315" src="https://www.youtube.com/embed/1sO5OKez0JQ?rel=0&amp;controls=2" frameborder="0" allowfullscreen></iframe>

最佳答案

我还注意到该错误大约一周了。
但是实际上，有一种更好的方法来加载比经典的controls = 2参数花费更少资源的Youtube iframe。

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.youtube-player{position:relative;width:560px;height:315px;cursor:pointer;background-color:#000000}
.youtube-player img{width:100%;height:auto;-webkit-transition: .4s all;-moz-transition: .4s all;transition: .4s all;}
.youtube-player .play{position:absolute;cursor:pointer;width:67px;height:47px;left:50%;margin-left:-34px;top:50%;margin-top:-24px;background:#ffffff;border-radius:20px;opacity:.8}
.youtube-player .play i{margin-top:-10px}
.youtube-player .play i:before{font-size:68px}
.youtube-player iframe{width:100%;height:100%;}
.youtube-player:hover .play{opacity:1}
.youtube-player:hover .play i{color:#cc181e}
</style>
<div class="youtube-player" data-id="0LRoDMe3mGk"></div>
<script>
document.addEventListener("DOMContentLoaded",
    function() {
        var div, n,
            v = document.getElementsByClassName("youtube-player");
        for (n = 0; n < v.length; n++) {
            div = document.createElement("div");
            div.setAttribute("data-id", v[n].dataset.id);
            div.innerHTML = ytplayerThumb(v[n].dataset.id);
            div.onclick = ytplayerIframe;
            v[n].appendChild(div);
        }
    });

function ytplayerThumb(id) {
    var thumb = '<img src="https://i.ytimg.com/vi/0LRoDMe3mGk/mqdefault.jpg">',
        play = '<div class="play"><i class="fa fa-youtube-play" aria-hidden="true"></i></div>';
    return thumb.replace("ID", id) + play;
}

function ytplayerIframe() {
    var iframe = document.createElement("iframe");
    var embed = "https://www.youtube.com/embed/0LRoDMe3mGk?autoplay=1";
    iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    this.parentNode.replaceChild(iframe, this);
}
</script>

当然，这是考虑到您已经加载Fontawesome用于其他目的。如果不是，则应按适合您的方式调整播放按钮。

问候，