baserJSでYouTubeのイベントAPIを使う

YouTubeを埋め込む

基本

data-idにYouTubeの動画IDを設定します。

<div class="youtube" data-id="FUgM105uN4c" data-width="1920" data-height="1080"></div>

var $youtube = $('.youtube').bcYoutube();

イベントを扱う

// onメソッドを使ってイベントリスナーを登録できます。
baserJSYoutubeInstance.on(eventType, eventListner);

// jQueryオブジェクトからYouTubeのAPIを扱うためのインスタンスを取り出します。
var yt = $youtube.data(baser.YouTube.className);

// イベントリスナーを登録します。
yt.on('playing', function () {
   console.log('再生中');
});

イベントの種類

基本的に本家APIのonStateChangeイベントのラッパーです。詳細は公式のリファレンスを参考にしてください。（※イベント名はアルファベットの小文字である必要があります）

それとは別に次のイベントが利用できます。

• embeded: プレイヤーが読み込まれAPIが利用できる状態