Question

我已经使用iframe嵌入了control = 2参数，如文档所述多年。 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>

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

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

Answer 1

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

<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用于其他目的。如果没有，你应该按照适合你的方式调整播放按钮。

此致

youtube今天在control = 2参数上引入了一个错误吗？

1 个答案: