Fire an event on play & stop of youtube iframe embed

Question

I am following this: Fire an event on play of youtube iframe embed But in my case i hide/show a div on play/pause. The following works but it fires both events on the first play click, only on the first. Its like: First Play Click -> slideUp -> slideDown -> slideUp After that it works as i need it On Play->slideUp and On Stop->slideDown

Can anyone see where i am wrong?

<script src="https://www.youtube.com/iframe_api"></script>
<div class="header_div">HEADER DIV</div>

<div id="video"></div>

var player, playing = false;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video', {
        height: '450',
        width: '800',
        videoId: 'jNQXAC9IVRw',
        events: {
            'onStateChange': onPlayerStateChange
            }
    });
}

function onPlayerStateChange(event) {
    if(!playing){
        $(".header_div").slideUp('slow');
        playing = true;
    } else {
        $(".header_div").slideDown('slow');
        playing = false;
    }
}

the player has multiple states see http://stackoverflow.com/a/8204143/4613398 for more info, you need to only 2 states — madalinivascu, Feb 10 '17 at 10:42

madalinivascu · Accepted Answer · 2017-02-10T10:46:06.807

the player has multiple states trigger the slide up at the start of the paying event, and slide down when the player is paused or ended

function onPlayerStateChange(event) {
    if(event.data == YT.PlayerState.PLAYING && !playing){
        $(".header_div").slideUp('slow');
        playing = true;
    } else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) {
        $(".header_div").slideDown('slow');
        playing = false;
    }

Fire an event on play & stop of youtube iframe embed

1 Answers1