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,
    });
  });
}
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。