Force a Youtube Video to be Watched Before Continuing on a Gravity Forms form.

This is a very specific application, but I had a client who was using Gravity Forms for a volunteer application and they had a intro/safety video that they wanted to be included in the application. The idea was that the applicant had to watch the entire video before continuing through the application.

To do this, I just created an HTML field in the multi-page form, and included the following code in that HTML field. It loads the YouTube API, gets the video details – including turning off the controls so people can’t skip to the end – then runs a function when the ‘onPlayerStateChange’ hits 0 (which is the end of the video).

To start, first we create a player div, and get the YouTube Player API:

<div id="player"></div>
<script src="https://www.youtube.com/player_api"></script>

The we need to disable the ‘Next’ button used in the form. We do this by finding the Next button’s ID – you can do that by just looking at the field’s ID in the form editor or go into the preview and inspect the button to get the actual ID.  So in the example here, the Next button’s element ID is ‘gform_next_button_2_58’ – the ‘2’ is the form ID, the 58 is the field ID. We set that to be disabled by adding this into the script:

document.getElementById("gform_next_button_2_58").disabled = true;

 

Then you can add in the YouTube video ID, set autoplay (1=autoplay, 0=don’t auto play), turn off the controls, set the video size, etc.

var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
playerVars: { 'autoplay': 0, 'controls': 0 },
videoId: 'YOUTUBEVIDEOID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

Finally we set the ‘onPlayerStateChange’ to do something when it ends. The ‘event.data’ is set to 0, which means the video has ended. So when the video ends, the disabled element is changed to false, so the button itself is clickable.

function onPlayerStateChange(event) {
if(event.data === 0) { document.getElementById("gform_next_button_2_58").disabled = false;
}

 

Here’s the full code that you can add into the GF HTML field:

<div id="player"></div>

<script src="https://www.youtube.com/player_api"></script>

<script>
document.getElementById("gform_next_button_2_58").disabled = true;
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
playerVars: { 'autoplay': 0, 'controls': 0 },
videoId: 'YOURVIDEOID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) { document.getElementById("gform_next_button_2_58").disabled = false;
}
}

</script>

<span>Please watch the video in its entirety to continue.</span>

 

If you want to set this function to run during other parts of the video, here’s the list of status numbers for the event.data area:

• -1 – unstarted
• 0 – ended
• 1 – playing
• 2 – paused
• 3 – buffering
• 5 – video cued