私はまたのためにそのバグを気づきました近似的に1週間。 しかし、実際には、古典的な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をロード考慮もちろんです。そうでなければ、あなたに合った方法で再生ボタンを適応させるべきです。
ありがとう、
はい、私もこれに気付きましたが、あなたの質問以外の情報はここで見つけることができません。確かに、YouTubeは何が起こっているのかを教えてください。 – user1413341