I have Implemented Vimeo Video on hover and it works fine, but the Issue am facing is whenever I hover over that div the video is playing properly but it does not pause when I hover outside that div(mouseout).
Please find the below Js Code:
$(document).on('mouseenter','.play-video',function(e){
e.preventDefault();
var videoUrl = $(this).attr('href');
//alert(videoUrl);
$('#videoBox_'+videoUrl).show();
$(this).next('#videoBox_'+videoUrl).html('<iframe id="player_'+videoUrl+'" src="http://player.vimeo.com/video/' + videoUrl + '?api=1&player_id=player_'+videoUrl+'&autoplay=1" frameborder="0" allowfullscreen></iframe>');
var player = $("#player_"+videoUrl);
//console.log(player[0].id);
player.mouseover(function(){
froogaloop = $f(player[0].id);
froogaloop.api('play');
});
player.mouseout(function(){
froogaloop = $f(player[0].id);
froogaloop.api('pause');
});
});
I would like to propose another alternative for this case. In order to play / pause certain vimeo video clips, We can tweak some of your given code like this:
Sample Reference Code:
$(document).ready(function() {
// 1) Assign a given variable called oPlayer
var oPlayer = undefined;
$('.container .item').on('mouseenter', '.play-video', function(e) {
e.preventDefault();
// 2) When user hover the hovered [iframe], The oPlayer
// will now be assigned to that given [iframe] element
oPlayer = $(this);
froogaloop = $f(oPlayer[0].id);
froogaloop.api('play');
}).mouseleave(function() {
// 3) So by the time the user leaves that
// iframe, It will pause that given [iframe]
froogaloop = $f(oPlayer[0].id);
froogaloop.api('pause');
});
});
Here's a jsfiddle for further reference: https://jsfiddle.net/85dLbt2u/5/
Hope this helps your given case.