epylinkn epylinkn - 4 months ago 29
Javascript Question

How to distinguish "seek" from "pause" via YouTube Player IFrame API

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:

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) {

// youtube fires 2xPAUSED, 1xPLAYING on seek
if (event.data == YT.PlayerState.PAUSED) {
overlay = setTimeout(showOverlay, 1000);
if (event.data == YT.PlayerState.PLAYING) {
overlay = hideOverlay();


Unfortunately, the YouTube player APIs don't have a reliable way to report on a "seek" state. If you're interested, here's a link to an (older) explanation as to why this is the case:


If you have any desire to use a chromeless player instead of the default one with YouTube controls, you can get around this limitation by listening for events on your custom scrubber ... as a simple example, jQuery UI's slider can be set up as a scrubber for a chromeless player and report the "seek" state by using the 'start,' 'stop,' and 'slide' events.