的Youtube API事件僅適用於第一個元素

Question

我正在與它的YouTube視頻，我希望有一個滑塊靜音所以我做了這個：

window.onYouTubePlayerAPIReady = function() { 
player = new YT.Player('video', { 
    events: { 
     'onReady': onPlayerReady 
    } 
}); 
} 

function onPlayerReady(event) { 
    event.target.mute(); 
} 

這工作！但僅限於第一部影片。檢查jsfiddle。如果你暫停第二個視頻，你可以看到第一個被靜音。我試着循環的事件，但沒有運氣

JSfiddle

Answer 1

您需要應用此爲每個視頻。

您還需要爲iframe元素使用唯一的id值。

因此改變id到video第一和video2第二，劇本之後

window.onYouTubePlayerAPIReady = function() { 
    player = new YT.Player('video', { 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
    player2 = new YT.Player('video2', { 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
} 

function onPlayerReady(event) { 
    event.target.mute(); 
} 

現在工作

更新演示在http://jsfiddle.net/gaby/mre4dvbe/2/

---

更新版本之後發表評論小號

window.onYouTubePlayerAPIReady = function() { 
    var videos = document.querySelectorAll('.yt-video'); 

    [].forEach.call(videos, function(video) { 
    new YT.Player(video, { 
     events: { 
     'onReady': onPlayerReady 
     } 
    }); 
    }); 
} 

function onPlayerReady(event) { 
    event.target.mute(); 
} 

這將任意數量的視頻（由共享同一類yt-video）

演示在http://jsfiddle.net/gaby/mre4dvbe/5/