APIを使ってYouTubeのプレーヤーを埋め込む際、API読み込み後にonYouTubeIframeAPIReady()関数を使って埋め込むことが多かったのですが、任意のタイミングで読み込みたい時に少し迷ったのでやり方をメモしておきます。
サンプルコード
loadVideoById()のような関数が用意されているのかと思ったのですが、普通にnew YT.Player()で埋め込んだらいいようです。
ボタンをクリック後に埋め込むようにしてみます。
HTML
<div id="sample"></div> <button id="btn">読み込み</button>
JavaScript
// YouTube Player APIを読み込む
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 ytArea = 'sample';
// 埋め込むYouTube ID
var ytID = '8QjqkATvH9M';
// ボタンをクリック後にYouTubeを埋め込む
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
// ボタンを非表示
btn.style.display = 'none';
// YouTubeを埋め込む
ytPlayer = new YT.Player(ytArea, {
width: 640,
height: 390,
videoId: ytID
});
}, false);
これでボタンクリック後にYouTubeのプレーヤーを埋め込めるようになりました。
ボタンクリック後にYouTubeを埋め込むデモページ
YouTubeのプレーヤーは読み込むのが少し重いので、埋め込みのタイミングをずらすなどして読み込みの負荷を軽減をするのもいいかもしれません。
ありがとうございます。m(_ _)m
最後に１つだけ！…教えて頂けませんでしょうか。
サムネイルをJSで表示するのでなくあらかじめPHPで表示するとしたら、
次の書き方は何が問題だと思われますか？
https://jsfiddle.net/uw1xcseb/46/
tamanikuruhitoさん
こちらはサムネイルクリック時にエラーが出ている件でしょうか？
サンプルを変更してみましたが、こちらでどうでしょうか。
https://cly7796.net/blog/sample/embed-youtube-player-at-arbitrary-timing/index3.html
クリックしたサムネイルと 動画の紐付けでうまくいっていないようだったので 調整しています。
こんにちは。
こちらのページと、そして他のYoutubeシリーズのページにとても助けて頂きました。
どうもありがとうございます!!
さて、参考にこのようなものが出来たのですが
https://jsfiddle.net/gstmnc91/51/
ここで疑問が浮かびました。
これでは動画が同時に再生されてしまったり、ボタンの適用動画が不明瞭であったりするのですけれど、
➀どれかを再生したら他が停まる。
➁「play/puase」は最後に操作した動画についてのみ適用される。
というような改良を加えるためには、どのような変更が最適でしょうか。
それに関しまして「同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする（https://cly7796.net/blog/javascript/it-is-not-the-simultaneous-playback-of-youtube/）」などのページも拝読したものの、自分で書いた部分との整合性が取れず、躓いてしまい、ご助言賜りたく恐縮ながらコメントさせて頂きました。
どうかお時間の許すときにお返事頂けましたら幸いです。
何卒、宜しくお願い申し上げます。
tamanikuruhitoさん
コメントありがとうございます。
いただいているサンプルを変更してみましたが、こちらでどうでしょうか。
https://cly7796.net/blog/sample/embed-youtube-player-at-arbitrary-timing/index2.html
①に関してはこちらの記事をベースに追加していて、②に関しては最後に操作したプレーヤーを管理する変数を用意して対応しています。
cly7796.netさん
こんにちは。お世話になっております。
まさか！完璧にお作り頂けるとは思っておりませんでした。感激です。
あれから私も記事を参考に奮闘しつつなんとか作れました。
さらにサムネイルクリックの機能も付けたバージョンです。
（https://jsfiddle.net/uw1xcseb/34/）
とはいえ、ろくな理解もないままで切ったり貼ったりしてので
コードに全く自信がありません。
そこでお願いなのですが、上の私のJSFiddleの拙~いコードでなく、
cly7796.netさんのそちらのサンプルのコードを
利用させて頂いてもよろしいでしょうか。
重ねて失礼致します。すみません！「私のJSFiddleの拙~いコード」と申し上げたのはあくまで、「cly7796.netさんの記事を参考にした部分」ではなく、「それをなんとなく切ったり貼ったりしただけの浅慮な組み合わせ方や、私の書いた部分」のことですので！笑
tamanikuruhitoさん
いえいえ、作成されたサンプルをざっと拝見させていただいた限り、それほど問題なさそうな印象でした。
サンプルコードはご自由に使っていただいて大丈夫です。