Help us understand the problem. What is going on with this article?

【JS】YouTubeのiframe埋め込み動画をJSでコントロール

More than 3 years have passed since last update.

YouTubeの埋め込みコードで動画をWebサイトに埋め込むことが出来ますが、再生や停止をJSでコントロールしたい場合があり、調べてみました。

ちなみにYouTubeはie8のサポートはもうしていないみたいです。ie8でYouTubeにアクセスすると以下のような画面になります。

スクリーンショット 2015-09-01 10.22.54.png

実装

Sample Page

HTML

HTMLでポイントなのは、iframeのsrcにenablejsapi=1というパラメーターを付加することです。
enablejsapiに1を設定することでプレーヤーJavaScript APIが有効になります。

その他のパラメーターはこちらを参照 → YouTube IFrame API Parameters

index.html
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Document</title>
</head>
<body>
  <iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.YouTube.com/embed/13S9kfvkchA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  <button id="play">play</button>
  <button id="pause">pause</button>
  <button id="stop">stop</button>
  <button id="clear">clear</button>
</body>
</html>

JS(jQuery)

JSでは、iframeのwindowにpostMessageでイベントを渡してあげるだけです。
これだけで、再生、停止、ストップをコントロールすることができます。
クリアはなんか上手くいかなかった。。

YouTube IFrame API 再生の制御

script.js
$(function(){
  $("#play").on("click", function(){
  videoControl("playVideo"); 
  });

  $("#pause").on("click", function(){
    videoControl("pauseVideo");
  });

  $("#stop").on("click", function(){
    videoControl("stopVideo");
  });

  $("#clear").on("click", function(){
    videoControl("clearVideo");
  });

  function videoControl(action){ 
    var $playerWindow = $('#popup-YouTube-player')[0].contentWindow;
    $playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
  }
});

postMessageの参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away