YouTube Player APIを使ってYouTube 動画を表示・再生する。複数再生/モーダル

YouTube Player APIはウェブサイトに埋め込んだYoutubeの動画をJavascriptで再生、停止といった操作をすることができるAPIです。iframeの埋め込みとは違い、ウェブサイトに埋め込んだYoutubeの動画の再生状況や、再生、停止、自動再生といった操作ができます。

1. 動画を表示する
2. 複数の動画を表示する
3. 複数の動画をモーダルで表示する

動画を表示する

See the Pen
IFrame Player API by kura (@kuranopen)
on CodePen.

HTML

<div id="player"></div>

• HTMLは再生用の要素を設置するだけです。id="playerを指定してJavasriptで操作します

Javascript

var videoId = 'M7lc1UVf-VE';  //動画ID
var videoWidth  = '640';  //動画横サイズ
var videoHeight = '360';  //動画縦サイズ

// iframe 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);

// #player にiframeplayerを作成
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: videoHeight,
    width: videoWidth,
    videoId: videoId,
    playerVars: {
      autoplay: 1,  //自動再生する
    },
  });
}

複数の動画を表示する

See the Pen
Untitled by kura (@kuranopen)
on CodePen.

デモでは4つの動画を読み込んでいます。

HTML

<div id="player1" class="youtube" data-video-id="DeJY5d14qKs"></div>
<div id="player2" class="youtube" data-video-id="HzUDAaYMNsA"></div>
<div id="player3" class="youtube" data-video-id="Cn1R92bInnc"></div>
<div id="player4" class="youtube" data-video-id="WNarpiGz3Kk"></div>

• 上述している、<div>要素をコピーペーストしid="player1"とdata-video-id="DeJY5d14qKs"の値を変更します
• idは他の値とかぶらないように一意の値にします。data-video-idはYoutubeの動画IDを指定します

Javascript

var videoWidth  = '640';  //動画横サイズ
var videoHeight = '360';  //動画縦サイズ

// iframe 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);

// #player にiframeplayerを作成
var player;
function onYouTubeIframeAPIReady() {
  $('.youtube').each(function(index){
    
    var videoId = $(this).data('video-id');
    var playerId = $(this).attr('id');
    
    player = new YT.Player(playerId, {
      height: videoHeight,
      width: videoWidth,
      videoId: videoId,
    });
  });
}

複数の動画をモーダルで表示する

See the Pen
YouTube Player API – modal multi by kura (@kuranopen)
on CodePen.

HTML

<a class="modal-open btn" href="#modal1">動画1</a>
<a class="modal-open btn" href="#modal2">動画2</a>
<a class="modal-open btn" href="#modal3">動画3</a>
<a class="modal-open btn" href="#modal4">動画4</a>

<div id="modal1" class="youtube-box modal"><div id="player1" class="youtube" data-video-id="DeJY5d14qKs"></div></div>
<div id="modal2" class="youtube-box modal"><div id="player2" class="youtube" data-video-id="HzUDAaYMNsA"></div></div>
<div id="modal3" class="youtube-box modal"><div id="player3" class="youtube" data-video-id="Cn1R92bInnc"></div></div>
<div id="modal4" class="youtube-box modal"><div id="player4" class="youtube" data-video-id="WNarpiGz3Kk"></div></div>

CSS

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
}
.modal-content {
  display: none;
  box-sizing: border-box;
  background: #fff;
  left: 50%;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.modal{
  display: none;
}
iframe.youtube{;
  vertical-align: top;
}
/* スマホ設定 */
@media screen and (max-width: 768px) {
  .modal-content {
    box-sizing: border-box;
    width: 100%;
  }
  .youtube-box{
    position: relative;
    width: 100%;
    padding-top: 56.05%;
  }
  .youtube{
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
  }
}

Javscript

$(".modal-open").click(function() {
  modal.open($(this));
});



/*
 *  モーダル設定
 */
function Modal(el) {
  this.option = {
    modalOverlayClass: "modal-overlay",
    modalContentClass: "modal-content",
  }
}
Modal.prototype = {
  open: function (el) {
    modalObj = this; 
    targetID = el.attr('href'); 
    $target = $(targetID).clone();
    
    //モーダル表示
    $("body").append('<div class="'+this.option.modalOverlayClass+'"></div>');
    $('.'+this.option.modalOverlayClass).append('<div class="'+this.option.modalContentClass+'"></div>').fadeIn(300);
    $('.'+this.option.modalContentClass).append($target).fadeIn(300);
    $target.fadeIn();
    
    //閉じるイベント追加
    $(".modal-overlay").click(function (e) {
      modalObj.close();
    });
  },
  close: function () {
    $(".modal-overlay").remove();
    $(".modal-content").remove();
  }
};
var modal = new Modal();



/*
 *  Youtube設定
 */
var videoWidth  = '640';  //動画横サイズ
var videoHeight = '360';  //動画縦サイズ

// iframe 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);

// #player にiframeplayerを作成
var player;
function onYouTubeIframeAPIReady() {
  $('.youtube').each(function(index){
    
    var videoId = $(this).data('video-id');
    var playerId = $(this).attr('id');
    
    player = new YT.Player(playerId, {
      height: videoHeight,
      width: videoWidth,
      videoId: videoId,
    });
  });
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選