iframe APIを使ったyoutubeの動画の埋め込み

2020年6月21日2021年7月8日 4分

Youtubeの埋め込み動画プレーヤーは、再生用のムービーやHTMLドキュメントなどを作成するパブリッシュがされますが、Player APIの JavaScriptコードでの埋め込みで動的に再生や条件を指定して、何かアクションを起こしたりする事が出来ます。

もっぱら、このYoutubeの埋め込みはiframeで直に書き込むことが容易ではありますが、iframe APIでの書き込みの方が応用が効き、何かと便利です。

今回は、iframe APIを使ったyoutubeの動画の埋め込みについてご紹介します。

APIの基本構造と使い方
APIのyoutubeのフレームに画像を重ねる
コピペ用のソース一式

APIの基本構造と使い方

iframe APIは簡単な構造で、以下の例を言い換えるとyoutubeの動画が準備が出来次第<div id=”movie2″ >に動画を書き出してね。という構造です。

onYouTubeIframeAPIReady という関数は、APIのJavaScriptの準備が完了した段階で自動でコールされます。プレーヤーの生成は YT.Player というクラスを利用して行い、引数にはプレイヤーを表示する為のコンテナ要素と、オプションを渡します。

<div id="movie2"></div>
<script>
var onYouTubeIframeAPIReady = function(){
    var player = new YT.Player("movie2", {
        videoId: "-4ORgG5fBOw",//youtubeの再生するID
        width: 900,//動画の幅
        height: 500,//動画の高さ
    });
};
</script>

上記を表示させる時には、以下のコードを<head>〜</head>の間に書いて、APIのJavaScript本体も読み込みましょう。

<script src="//www.youtube.com/iframe_api"></script>

これで #movie2 要素にyoutubeの動画が生成されます。

また、この例ではYT.Player の出力先にid名を指定していますが、APIのscriptの構文を変更してHTMLで<div>などの各要素でも問題ありません。

new YT.Player(document.getElementById("movie"), {...});//idに生成する場合
new YT.Player(document.createElement("div"), {...});//divに生成する場合

APIのyoutubeのフレームに画像を重ねる

APIで出力したyoutubeの#movie に、position プロパティで画像を重ねてみましょう。

static	配置方法を指定しない
relative	相対位置への配置
absolute	絶対位置への配置
fixed	スクロールしても固定される絶対配置

position プロパティは、上記4つの内今回使うのは position:relative と position:absolute です。

画像の absolute は、下のプロパティも併記して位置を調整します。

top	上からの距離を指定
right	右からの距離を指定
bottom	下からの距離を指定
left	左からの距離を指定

コピペ用のソース一式

上記サンプルのHTML＋CSS+JSのソースです。

コピペして使う時には、APIのJS内のコメント箇所を書き換えて再生した動画を選び使用しましょう。

コードを表示する

HTML

<div class="relative">
  <div id="movie2"></div>
  <img class="absolute" src="https://dubdesign.net/wp-content/uploads/2020/04/dub_logo_new.svg">
</div>

CSS

#movie2 { width:100%; height: 500px; top:0; }

.relative {
    position: relative;
    width: 100%;
}
.absolute {
    position: absolute;
    left: 0;
    top: 150px;
   width: 80%;
z-index: 999;
}

  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubeIframeAPIReady() {
    var movieId = 'QdmVFlmbIy8';//youtubeの動画のID。再生したい動画のIDを入力。
    player = new YT.Player('movie2', {
      /*
      playerVarsで細かい設定ができます。
      コメントはどんな設定をしているか書いているだけです。
      */
      playerVars:{
        playsinline: 1,
        autoplay: 1, // 自動再生
        loop: 1, // ループ有効
        listType: 'playlist', //リスト再生（ループ再生に必要）
        playlist: movieId, // 再生する動画リスト（ループ再生に必要）
        controls: 0, // コントロールバー非表示
        enablejsapi: 1, //JavaScript API 有効
        modestbranding:1,//yutubeロゴの非表示
        iv_load_policy: 3, //動画アノテーションを表示しない
        disablekb:1, //キーボード操作OFF
        showinfo:0, //動画の再生が始まる前に動画のタイトルなどの情報を表示しない
        rel:0, //再生終了時に関連動画を表示しない
      },
      videoId:  movieId,
      events: {
        'onReady': onPlayerReady,//動画の準備ができたらonPlayerReadyを実行
        'onStateChange': onPlayerStateChange,
      }
    });
  }
  function onPlayerReady(e) {
    e.target.mute();//音声ミュート
    e.target.playVideo();//動画スタート（SP用）
  }
  function onPlayerStateChange(e){
    if(e.data == 1){
      document.getElementById('cover').style.opacity = 1;//動画の再生が始まったら表示
    }
  }
 $(function(){
    $('li.effets_cont').each(function(){
        var src_off = $(this).find('.circle_in img').attr('src');
        var src_on = src_off.replace('_off','_on');
        $('<img />').attr('src',src_on);
        $(this).hover(function(){
            $(this).find('.circle_in img').attr('src',src_on);
        },function(){
            $(this).find('.circle_in img').attr('src',src_off);
        }); 
    });
});
$(document).ready(function() {
        $('.Sld').roundabout();
        //ulの部分は回転させる要素の親を指定
    });