How to automatically hide a YouTube video after it finishes playing

Sometimes you need to make your YouTube video automatically disappear immediately after it finishes playing.

I wanted to know how to do this because I needed the functionality for one of our quiz pages. In this example, I wanted to autoplay a YouTube video in which I encourage visitors to take the quiz, and then make the video disappear, so that the visitor can actually take the darn quiz without a thumbnail of my face hovering above it and distracting them.

After beating my head against the wall for 45 minutes and still not getting it to work, I asked one of our awesome MemberFix techs, Cristian, to help me out. Naturally, he got it working (thanks Cristian!) Here’s how you can make your YouTube video disappearing after it’s done playing:

1 – Copy the code from the snippet below and paste it into your TEXT editor if you’re using WordPress. (I recommend you click on the DOWNLOAD RAW link on the following snippet to get the code in plain text.)

*Note: If you’re using some kind of visual composer or page builder (for example, we use Divi for almost everything we do), then make sure you create a “code” element, since the snippet you’re pasting contains Javascript.

2 – Find line 15 of the code snippet above and replace the video ID with YOUR YouTube video ID.

You can find this by opening your video in YouTube and looking at the string of characters at the end of the URL (the part that comes immediately after the https://www.youtube.com/watch?v=):

3 – On lines 12 and 13 change the height and width dimensions to whatever you prefer.

4 – On line 14 you can toggle several additional options (0 = false; 1 = true):

playerVars: { ‘rel’:0, ‘autoplay’: 1, ‘controls’: 0 },

rel means “related videos”. If you want related videos to show after the video plays then set this to ‘1’. If not, set it to ‘0’. Since the YouTube player will disappear after the video completes this option doesn’t much matter anyway.

autoplay means “automatically play this video when the page loads”. Set this to ‘0’ if you don’t want the video to autoplay. Set it to ‘1’ if you do.

controls refers to the video player controls (stop, pause, play, etc.) If you want the controls to be visible set this to ‘1’; if you want them to be hidden set it to ‘0’.

5 – Save your work and test it!

If you did everything correctly the video should disappear after it finishes playing, like this:

<div id=”player”></div><!– –><script><!– –>var tag = document.createElement(‘script’);<!– –>tag.src = “https://www.youtube.com/iframe_api”;<!– –>var firstScriptTag = document.getElementsByTagName(‘script’);<!– –>firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);<!– –><!– –>var player;<!– –><!– –>function onYouTubeIframeAPIReady() {<!– –> player = new YT.Player(‘player’, {<!– –> height: ‘219’,<!– –> width: ‘386’,<!– –> playerVars: { ‘rel’:0, ‘autoplay’: 0, ‘controls’: 1 },<!– –> videoId: ‘UmCGnYc9SCE’,<!– –> events: {<!– –> ‘onReady’: onPlayerReady,<!– –> ‘onStateChange’: onPlayerStateChange<!– –> }<!– –> });<!– –>}<!– –><!– –>function onPlayerReady(event) {<!– –> //event.target.playVideo();<!– –>}<!– –><!– –>var done = false;<!– –><!– –>function onPlayerStateChange(event) { <!– –> if(event.data === YT.PlayerState.ENDED) { <!– –> stopVideo();<!– –> }<!– –>}<!– –><!– –>function stopVideo() {<!– –> player.stopVideo();<!– –> document.getElementById(“player”).style.display = “none”;<!– –> document.getElementsByClassName(‘fluid-width-video-wrapper’).style.padding = “0”; <!– –>}<!– –></script>