JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのYouTube Player APIで初回アクセス時にYouTube動画をモーダルで自動再生

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

YouTube Player API

JavaScriptのYouTube Player APIで初回アクセス時にYouTube動画をモーダルで自動再生

JavaScriptのYouTube Player APIで初回アクセス時にYouTube動画をモーダルで自動再生

モーダルのUIと、YouTube Player APIを掛け合わせて初回のみ表示させるスニペットを作ってみました。

かかかず
かかかず

用途としては、CMを初回アクセス時に再生するとかです。

モーダル自体、ユーザー本意のUIでないので気をつけて使う必要がありますが、初回で動画を見せる方法を検討している方は参考にしてもらえたら嬉しいです。

YouTube Player API

YouTube Player APIは、YouTubeの動画を埋め込むことができるAPIです。

APIを使わない場合、HTMLの iframe で埋め込むことができますが、APIはJavaScriptで提供されており、再生や停止の挙動や、再生条件の設定が色々できたりと応用が効くので、非常に便利です。

APIの詳細は以下の公式ガイドがあるので、参考にしてみてください。

外部リンク iframe 組み込みの YouTube Player API リファレンス

初回アクセス時にYouTube動画をモーダルで再生するサンプル

早速サンプルです。この記事の初回アクセス時にモーダルが表示され、そのモーダルにミュートの状態でYouTubeの動画が再生されます。

モーダルの表示後は、モーダル背景にある薄黒いオーバーレイか、「✖️」ボタンをクリックすることで、モーダルが非表示になります。また、非表示になるのと同時に、それまで再生されていたYouTube動画も一時停止します。

再生されるYouTubeの動画は、ミュートで始まってから再度までいくとループ再生されるように設定しています。

かかかず
かかかず

この辺の動画の設定は、YouTube APIで好みの設定が可能です。

実装の手順と方法

手順と方法

各コードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを2つ記述

はじめに、設置したい場所にHTMLを記述していきますが、コードは2つです。

まずは、「YouTubeのモーダル」のコードを任意の場所に記述します。記述する場所はどこでもOKですが、HTMLの構造的には main タグの冒頭の方が良いと思います。

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <div id="movie2"></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

モーダルの記述が完了したら、モーダルを閉じた後にまた再表示するボタンのコードを設置します。

<button id="modalView">モーダルを表示</button>
かかかず
かかかず

任意の再表示をさせない場合は、「ボタンのコード」の記述は不要です。

JavsScriptを2つ記述

HTMLの記述が終わったら、JavaScriptのコードを記述します。

まずは、初回アクセス時にYouTubeのモーダルが開くコードを記述します。場所はどこでもOKですが、以下のコードを<body>〜</body>の中このコードも、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

// YouTube API
  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: 1, // コントロールバー非表示
        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;//動画の再生が始まったら表示
    }
  }

// 初回モーダル
const keyName = 'viewed';
const keyValue = true;

if (!sessionStorage.getItem(keyName)) {
    sessionStorage.setItem(keyName, keyValue);

    console.log("初回の閲覧");
window.onload = function() {
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');
  var ytplayer = document.getElementById('movie2');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
      player.pauseVideo(); //一時停止
    })
  }
}
} else {
    console.log("2回目以降の閲覧");
}

次に、モーダルを際表示させるボタンを置きたい場合、以下のコードをページに記述します。

このコードも、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

document.getElementById('modalView').addEventListener('click', () => {
const modalbtn = document.getElementById('firstTimeModal');
     player.playVideo();
     modalbtn.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');
  var ytplayer = document.getElementById('movie2');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      modalbtn.classList.remove('is-show');
      player.pauseVideo();
    })
  }

});
CSSを記述

最後に、見た目を整える為CSSを記述します。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #000;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}
かかかず
かかかず

これで完成です。

ざっくりとしたコードの解説

コードはHTML・JavaScript・CSSの3種類です。コードについて解説していきます。

HTML

まずはじめに、2種類あるHTMLのコードについて解説します。

YouTubeのモーダル

YouTubeの動画が表示されるモーダルは、以下のようなコードになっています。

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <div id="movie2"></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

<div id="movie2"></div> が、YouTube APIで動画を出力させる要素です。この要素がないか、もしくは要素のid名がJavaScriptのコードと一致しないと、動画が表示されないので注意するようにしましょう。

モーダルを再表示するボタン

ボタンは、これだけのコードでOKです。「modalView」のid名がついた button タグが、後述のJavaScriptのクリックイベントで連動します。

<button id="modalView">モーダルを表示</button>

なので、「modalView」のid名を変更する場合、それに応じてJavaScriptの冒頭にある .getElementById('modalView') のid名も変更するようにしてください。

JavaScript

続いてJavaScriptのコードについてです。JavaScriptのコードも2種類あるので、順に解説していきます。

初回アクセス時のモーダル

初回アクセス時のモーダルのコード量は多めです。というのも、YouTube APIのコードが割合を占めていますが、ここの記述で、動画の細かい設定を行います。

// YouTube API
  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: 1, // コントロールバー非表示
        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;//動画の再生が始まったら表示
    }
  }

// 初回モーダル
const keyName = 'viewed';
const keyValue = true;

if (!sessionStorage.getItem(keyName)) {
    sessionStorage.setItem(keyName, keyValue);

    console.log("初回の閲覧");
window.onload = function() {
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');
  var ytplayer = document.getElementById('movie2');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
      player.pauseVideo(); //一時停止
    })
  }
}
} else {
    console.log("2回目以降の閲覧");
}

細かい設定はスニペットに直接コメントアウトで記述していますが、このように好みの設定ができるので必要に応じて記述内容を変えるようにしましょう。

そして、初回アクセスは、 セッション情報にアクセスする sessionStorage のプロパティでの条件分岐を行い、動作を分けています。

モーダルの再表示ボタン

モーダルを再表示させるコードは、HTMLで設置した button タグがトリガーになってモーダルが表示されます。

その時使うのが、定番の .addEventListener クリックイベントで記述して、表示されたモーダルの非表示の時の動作もコードに記述します。

document.getElementById('modalView').addEventListener('click', () => {
const modalbtn = document.getElementById('firstTimeModal');
     player.playVideo();
     modalbtn.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');
  var ytplayer = document.getElementById('movie2');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      modalbtn.classList.remove('is-show');
      player.pauseVideo();
    })
  }

});

YouTube Player APIで利用可能な関数

YouTube Player APIには、独自で便利な関数があり、それらの記述で iframe 内のYouTube動画を操作することができます。

以下3つは、動画の再生を操作する関数で、この記事のコードでも使用しています。

関数動作
player.playVideo();動画を再生
player.pauseVideo();動画を一時停止
player.stopVideo();動画を停止
かかかず
かかかず

これ以外にも関数は色々あるので、チェックしてみてください。

CSS

最後にCSSです。モーダルの見た目を整える記述内容です。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #000;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}

さいごに

先生

このコードは、別記事の初回アクセスでモーダルを表示させるスニペットと、YouTube APIを組み合わせて作ったスニペットです。

このように掛け合わせてコードを作ると色々できるので、以下の記事もあわせて参考にしてみてください。

モーダル JavaScriptのsessionStorageでそのページへ初回アクセス時にモーダルを表示

UI

  • 他のウィンドウが開くことができないポップアップのUIです。

    モーダル

    モーダル

  • 並列な関係を持つ情報を1つずつ格納するUIです。

    タブ

    タブ

  • サイドから全体を覆うほど大きいメニュー表示するUIです。

    ドロワー

    ドロワー

  • 画像などのコンテンツをスライド表示させるUIです。

    スライダー

    スライダー

  • スクロールで表示が変化するスニペットです。

    スクロール

    スクロール

  • クリックすると隠れていた部分が開閉するUIです。

    アコーディオン

    アコーディオン

  • ページのhタグを取得して目次を生成するスニペットです。

    目次

    目次

  • ページの読み込み時にアニメーションをするスニペットです。

    ローディングアニメーション

    ローディングアニメーション

  • マウスオーバーした際に表示される補足説明です。

    ツールチップ

    ツールチップ

  • ページ内上部にあるナビゲーションUIです。

    ヘッダー

    ヘッダー

  • 行と列の組み合わせでできているUIです。

    テーブル

    テーブル

  • データを表やグラフで可視化して見せるUIです。

    グラフ

    グラフ

  • 背景をアニメーションで動かすスニペットです。

    背景

    背景

フォーム

  • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

    フォーム

    フォーム

文字

  • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

    文字の装飾

    文字の装飾

  • 文字列の操作をして、置換・変更を行うスニペットです。

    文字の操作

    文字の操作

  • 文字列をカウントして表示などを行うスニペットです。

    文字のカウント

    文字のカウント

  • 数字の要素を取得して、変更するスニペットです。

    数字の操作

    数字の操作

ウィンドウ

classの操作

  • 要素を取得して、classを追加・削除するスニペットです。

    classの操作

    classの操作

要素の操作

API

  • WordPressのAPIを取得して表示するスニペットです。

    WP REST API

    WP REST API

  • Google Books APIsで書籍の情報を表示するスニペットです。

    Google Books APIs

    Google Books APIs

  • 楽天市場のAPIを取得して表示するスニペットです。

    楽天市場API

    楽天市場API

  • openBDのAPIを取得して表示するスニペットです。

    openBD

    openBD

画像・動画

  • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

    画像の操作

    画像の操作

  • YouTubeの動画を表示するスニペットです。

    YouTube

    YouTube

リンク

  • ページ内のリンクを取得して変更・操作するスニペットです。

    リンク

    リンク

  • Google Analyticsとの連携をするスニペットです。

    Google Analytics

    Google Analytics

cookie

  • ブラウザのcookieを利用するスニペットです。

    cookie

    cookie

検索

  • 指定した要素の中から検索を行うスニペットです。

    検索

    検索