Youtube動画を再生するコードのミュート処理

Question

前提・実現したいこと

以下ソースコードにおいて、動画の音声ミュート処理をしたいのですが、どこに何を入れれば良いのかがわからず途方に暮れています。

当方JavaScript全くの初心者であり、以下リンクのようなMacbookの壁紙に動画を入れるという処理をしたく、触っているという状態です。

・忙しい人のための「デスクトップ焚き火」導入方法【mac】【動く壁紙】

ソースコードにミュート処理ができていないため、壁紙で表示される動画から音が出てしまいます。
以下のサイトを参考に見て、試行してみましたが上手く作動しませんでした。

参考にしたサイト
videoタグの属性やJSを使用した動画のコントロール
動画ファイルを自動再生する
###最新修正ソースコード

var w = window, player;
// 再生したいyoutubeの動画id
var vid = 'Ftm2uv7-Ybw';

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// プレイヤーが使用可能になったとき
function onPlayerReady(event) {
  // ミュートする
  event.target.mute();
}
w.onYouTubeIframeAPIReady = function() {
  player = new YT.Player('video', { 
 events: {
            // イベントを登録
            'onReady': onPlayerReady,
        }
// 置き換えるHTML要素のid
    videoId: vid,
    playerVars: {
      rel: 0, //動画再生後の関連動画を表示しない
      showinfo: 0, //動画再生前に動画情報を表示しない
      autoplay: 1, //動画準備後に自動再生
      loop: 1 //ループ設定
    },
    events: {
      onStateChange: function(e) {
        // 再生終了後
        if ( e.data == YT.PlayerState.ENDED ) {
	        //再生
         	e.target.playVideo();
        }
      }
    }
  });
  player.setLoop(true);

};

ソースコード

var w = window, player;
// 再生したいyoutubeの動画id
var vid = 'Ftm2uv7-Ybw';

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

w.onYouTubeIframeAPIReady = function() {
  player = new YT.Player('video', { // 置き換えるHTML要素のid
    videoId: vid,
    playerVars: {
      rel: 0, //動画再生後の関連動画を表示しない
      showinfo: 0, //動画再生前に動画情報を表示しない
      autoplay: 1, //動画準備後に自動再生
      loop: 1 //ループ設定
    },
    events: {
      onStateChange: function(e) {
        // 再生終了後
        if ( e.data == YT.PlayerState.ENDED ) {
	        //再生
         	e.target.playVideo();
        }
      }
          }
    }
  });
  player.setLoop(true);
};

Answer 1

以下のコードを追加すれば音声をミュートにすることができます

w.onYouTubeIframeAPIReady = function () {
    player = new YT.Player('video', {
        ...
        events: {
            // イベントを登録
            'onReady': onPlayerReady,
        }
  ....

// プレイヤーが使用可能になったとき
function onPlayerReady(event) {
  // ミュートする
  event.target.mute();
}

Comments

[11mi_se14]

mouse_484様

ありがとうございます。大変恐縮ですが、上記コードをどの位置に追加すれば良いのでしょうか？
一番最後に追加してもミュートになりませんでした。

お手数をおかけしますが、お教えいただけますと幸いです。

[mouse_484]

イベントを登録する部分を書き忘れていました
最初のコードはそのままで YT.playerのeventsオプションを追記してください

[11mi_se14]

ありがとうございます。
何となく、ここかなという場所にコピペしてみましたが、動作しません。「最新修正ソースコード」に現在のコードを貼り付けています。こちらどの箇所が間違っていますでしょうか？

お手数をおかけし恐縮ですが、ご教授いただけますと幸いです。

[mouse_484]

events 重複してるのでまとめればよいのでは？