I have 2 Vimeo players in my page when I play the first video then play second video first one gets paused.
var vid1=new Vimeo.Player($('.one'));
var vid2=new Vimeo.Player($('.two'));
$('.btnonePlay').on('click',function(){
vid1.play();
})
$('.btnonePause').on('click',function(){
vid1.pause();
})
$('.btntwoPlay').on('click',function(){
vid2.play();
})
$('.btntwoPause').on('click',function(){
vid2.pause();
})
Steps on how to reproduce the issue:
- Click on play video one
- Click on play video two
Player one will pause when the 'play video two' button is clicked.
Working example on jsFiddle.
The entire code is also in the snippet below.
var vid1 = new Vimeo.Player($('.one'));
var vid2 = new Vimeo.Player($('.two'));
$('.btnonePlay').on('click', function() {
vid1.play();
})
$('.btnonePause').on('click', function() {
vid1.pause();
})
$('.btntwoPlay').on('click', function() {
vid2.play();
})
$('.btntwoPause').on('click', function() {
vid2.pause();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/286183716">Annihilation Song | Rubblebucket (Official Music Video)</a> from <a href="https://vimeo.com/amandabonaiuto">Amanda Bonaiuto</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<button class="btnonePlay"> Play video one</button>
<button class="btnonePause"> Pause video one</button>
<div class="two">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/286183716">Annihilation Song | Rubblebucket (Official Music Video)</a> from <a href="https://vimeo.com/amandabonaiuto">Amanda Bonaiuto</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<button class="btntwoPlay"> Play video two</button>
<button class="btntwoPause"> Pause video two</button>