Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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が利用できる状態
YusukeHirao
DXデザイナー/エンジニア。マークアップ/フロントエンド/アクセシビリティが専門。
https://yusukehirao.github.io/
Why not register and get more from Qiita?
  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