I have a youtube video that I've embedded with youtube's iFrame API. I would like to:
- show a translucent overlay when a user pauses the video (WORKS)
- hide that overlay when the user plays the video (WORKS)
- NOT show an overlay when the user is "seeking" via the youtube controls (POSSIBLE?)
Having trouble controlling the seek behavior. Is it possible?
To reproduce, hold the seek at the same position for a few seconds and watch the overlay appear. Example jsfiddle is here: http://jsfiddle.net/dNU84/3/
var ytvideo;
window.onYouTubePlayerAPIReady = function () {
ytvideo = new YT.Player('ytvideo', {
width: '400',
height: '300',
videoId: 'BOksW_NabEk',
playerVars: {
'autoplay': 1,
'controls': 1
},
events: {
"onStateChange": onPlayerStateChange
}
});
}
function showOverlay() {
if ($('.video .video-overlay').length) $('.video .video-overlay').fadeIn(1200);
}
function hideOverlay() {
if ($('.video .video-overlay').length) $('.video .video-overlay').hide();
}
var overlay;
function onPlayerStateChange(event) {
console.log(event.data);
clearTimeout(overlay);
// youtube fires 2xPAUSED, 1xPLAYING on seek
if (event.data == YT.PlayerState.PAUSED) {
overlay = setTimeout(showOverlay, 1000);
}
if (event.data == YT.PlayerState.PLAYING) {
overlay = hideOverlay();
}
}