YouTubeのプレーヤーを任意のタイミングで埋め込む

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のプレーヤーは読み込むのが少し重いので、埋め込みのタイミングをずらすなどして読み込みの負荷を軽減をするのもいいかもしれません。
 

このエントリーをはてなブックマークに追加

関連記事

7件のコメント

  1. tamanikuruhito より:

    ありがとうございます。m(_ _)m
    最後に1つだけ!…教えて頂けませんでしょうか。
    サムネイルをJSで表示するのでなくあらかじめPHPで表示するとしたら、
    次の書き方は何が問題だと思われますか?
    https://jsfiddle.net/uw1xcseb/46/

  2. tamanikuruhito より:

    こんにちは。
    こちらのページと、そして他のYoutubeシリーズのページにとても助けて頂きました。
    どうもありがとうございます!!

    さて、参考にこのようなものが出来たのですが
    https://jsfiddle.net/gstmnc91/51/
    ここで疑問が浮かびました。

    これでは動画が同時に再生されてしまったり、ボタンの適用動画が不明瞭であったりするのですけれど、
    ➀どれかを再生したら他が停まる。
    ➁「play/puase」は最後に操作した動画についてのみ適用される。
    というような改良を加えるためには、どのような変更が最適でしょうか。

    それに関しまして「同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする(https://cly7796.net/blog/javascript/it-is-not-the-simultaneous-playback-of-youtube/)」などのページも拝読したものの、自分で書いた部分との整合性が取れず、躓いてしまい、ご助言賜りたく恐縮ながらコメントさせて頂きました。

    どうかお時間の許すときにお返事頂けましたら幸いです。
    何卒、宜しくお願い申し上げます。

    • cly7796.net より:

      tamanikuruhitoさん
      コメントありがとうございます。

      いただいているサンプルを変更してみましたが、こちらでどうでしょうか。
      https://cly7796.net/blog/sample/embed-youtube-player-at-arbitrary-timing/index2.html

      ①に関してはこちらの記事をベースに追加していて、②に関しては最後に操作したプレーヤーを管理する変数を用意して対応しています。

      • tamanikuruhito より:

        cly7796.netさん

        こんにちは。お世話になっております。
        まさか!完璧にお作り頂けるとは思っておりませんでした。感激です。

        あれから私も記事を参考に奮闘しつつなんとか作れました。
        さらにサムネイルクリックの機能も付けたバージョンです。
        (https://jsfiddle.net/uw1xcseb/34/)

        とはいえ、ろくな理解もないままで切ったり貼ったりしてので
        コードに全く自信がありません。

        そこでお願いなのですが、上の私のJSFiddleの拙~いコードでなく、
        cly7796.netさんのそちらのサンプルのコードを
        利用させて頂いてもよろしいでしょうか。

        • tamanikuruhito より:

          重ねて失礼致します。すみません!「私のJSFiddleの拙~いコード」と申し上げたのはあくまで、「cly7796.netさんの記事を参考にした部分」ではなく、「それをなんとなく切ったり貼ったりしただけの浅慮な組み合わせ方や、私の書いた部分」のことですので!笑

          • cly7796.net より:

            tamanikuruhitoさん
            いえいえ、作成されたサンプルをざっと拝見させていただいた限り、それほど問題なさそうな印象でした。
            サンプルコードはご自由に使っていただいて大丈夫です。

tamanikuruhito へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31