Youtubeをメインビジュアルとして埋め込むコーディングのお仕事があったのですが、
なぜかいただいたYoutubeの最初の1秒間が真っ暗だったため、どうにか1秒目から動画をスタートさせたくて、調べて見つかったのでメモメモ。
φ(･･。
あれこれ検索したけど、最初からリファレンス読めばよかった...
※取り扱い説明書はちゃんと使う前に読みましょう。電化製品も。APIも。
- 参考リファレンス1: iframe 組み込みの YouTube Player API リファレンス
- 参考リファレンス2: YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
APIでのYoutubeの実装は、上記リファレンスページにサンプルコードがあるのでそれで行けました。
※下記のサンプルコードはリファレンスから参照してちょっと削ったり編集したりしたものです。
途中から再生させたいときは、playerVarsというプロパティを追加して、その中にstartパラメータを入れます。
他にもrelパラメータはよく使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Youtube API Test</title>
</head>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: {
rel: 0, // 0にすると関連動画は同じチャンネルから選ばれる
start: 9 // Googleのロゴをぶっ飛ばして9秒目からスタート
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>