mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

How to automatically hide a YouTube video after it finishes playing

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.

vid - How to automatically hide a YouTube video after it finishes playing

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.

divi code module - How to automatically hide a YouTube video after it finishes playing

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=):

video id - How to automatically hide a YouTube video after it finishes playing

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>

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
Learn our exact process we use to set up hosting for membership sites we work with. Refined over years of trying different apps and hosts!

Introduction In this article, you will learn how to configure data that is coming from registrations in MemberPress to be sent to HubSpot to build a contact list using Zapier.

Learn how to migrate your community from Invision Power board (IPBoard) to Tribe.so.
Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Michael Stocker
Michael Stocker
September 1, 2018 3:08 pm

This is really GREAT! I love it!
Thank you and thank Christian.
I’m about to set up my first membership site right now and I feel having found awesome guys.
Regards from the mediteranian, spain

Vic Dorfman
Reply to  Michael Stocker
September 1, 2018 3:10 pm

Thanks Michael! Let me know how we can help. πŸ™‚

Todd
September 6, 2018 9:14 am

Is there a way to do this with a self hosted video using wordpress?

Todd
September 6, 2018 9:15 am

Sounds pretty techy for us average folk. πŸ™‚
Is there a way to do this on a self hosted video in wordpress?
Thanks so much for your article.
Todd

Todd
September 7, 2018 12:15 pm

Can this be done with site hosted video or only YouTube videos?

Kind regards,

Todd