的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/