YouTubeをミュートで埋め込んだったよ。

YouTubeをミュートで表示した際のメモ

YouTubeの動画ってYouTubeのサイトから簡単にiframeでサイトに埋め込んだりできるけど、ミュートってできないんだよね。そこで今回はjavascriptを使ってYouTubeをミュートで再生してみたいと思うよ。

基本的には下記のコードをコピペすればOK。

[HTML]

<div class="youtube-area">
  <div id="youtube"></div>
</div>

YouTubeのサイトからのiframeの埋め込みとは違ってiframe apiを使うと<div id="youtube"></div>自体がiframeに変わるんだよね。だから一応スタイルとか実装しやすいように、親要素としてyoutube-areaのクラス名のdivタグで囲っておいたよ。

[JavaScript]

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

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
    'youtube',
    {
      videoId: 'xxxxxxxx', // YouTubeのvideoIdを入れる
      playerVars: {
        loop: 0, // ループしない
        controls: 1, // コントローラー表示
        autoplay: 0, // 自動再生オフ
        rel: 0,  // オススメ動画を表示させない
        showinfo: 1 // タイトル表示
      },
      events: {
        'onReady': onPlayerReady
      }
    }
  );
}
function onPlayerReady(event) {
  event.target.setVolume(0);
}

videoIdのところにはYouTubeのURLの「watch?v=xxxxxxxx」というところの「xxxxxxxx」を入れたらOK！
こんなURLだったとき -> https://www.youtube.com/watch?v=xxxxxxxx

eventsの「onReady」は読み込んだら実行するイベントなんだよね。だからこの場合だと動画を読み込んだら「onPlayerReady」を発動してねという意味になるってこと。

で、そこのイベントではsetVolume(0)てのでミュートにしてるんだよね。これで実質ミュートってこと。ちなみに数字が音量になっていて、0から100まで指定できるよ。

ちなみにミュートだとevent.target.mute();というのもあるんだけど、これって、スマホだとミュートを解除できなくて何をしても音が出ないという感じになってしまうので使わない方がいいかも。

あ、あとこれちょっと調べてわかったんだけど、スマホだとevent.target.setVolume(0)してもミュートにならないんだよね。音量はデバイスに依存するってことみたいで。

まとめ

ということで、javascriptを使った埋め込みも簡単にすることができたよね。今回は書いてないけど、eventsもいろいろあるのでよかったらまた見てみてね。