CODEWITHSUNDEEP
javascriptvideoyoutube
pork-chop
pork-chop

Reputation: 83

Hide Div when YouTube Video Ends

I have an absolutely placed div with an embedded YouTube video inside of it. I am placing it over another image on my website with the intention of showing first-time visitors a short video, then hiding the div with the video to reveal the original content of the page.

I know how to hide and show my div with click events, but I am very new to Javascript. I need help writing the function that would determine the YouTube video has ended and apply visibility:hidden to my div. Any help is greatly appreciated!

Upvotes: 0

Views: 2711

Answers (1)

Evan
Evan

Reputation: 6115

your going to want to take a careful look at the documentation, paying special attention to the Events section.

you will be using

onStateChange: This event is fired whenever the player's state changes. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5). When the SWF is first loaded it will broadcast an unstarted (-1) event. When the video is cued and ready to play it will broadcast a video cued event (5).

and you will want to do something when the state equals 0, which means ended, something similar to the below:

// attach your listener
    function onYouTubePlayerReady(playerId) {
      var ytplayer = getElementById("myytplayer");
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }
// your callback function   
    function onytplayerStateChange(newState) {
       if (newState === 0){
            $('yourContainingDiv').hide();
            // or if you want to just remove it...
            $('yourContainingDiv').remove();
       }
    }

if you are having trouble with addEventListener, check out YouTube player api - addEventListener() does not work for me?

addEventListener looks like it isn't supported by early versions of IE and might be slightly buggy

Upvotes: 1

Related Questions