Show next button on multipage form only once youtube video ends

By: Tudor Oman | Asked: 07/19/2022
ForumsCategory: Code HelpShow next button on multipage form only once youtube video ends
Tudor Oman asked 2 years ago
Hi I was hoping someone on this forum has figured out a way to use the YouTube API with formidable forms. I would like to be able to hide the next button on a multipage form until a video has finished playing. I have submitted a ticket but this is not a supported feature. Any thoughts/help would be appreciated.
Tudor Oman replied 2 years ago

Thanks this does work but cant seem to get it to work within a form

Bobby Clapp replied 2 years ago

Add a hidden field and change the youtube api code to put a value into that hidden field under the "// when video ends" event. Make that field required within the page where the video exists. When the video ends, the value will fill and you can move forward. if not, it won't process. That's my thought without testing it.

Tudor Oman replied 2 years ago

@Bobby Clapp - this is what I have been trying to figure out but haven't been able to figure out how to do it. Any suggestions would be appreciated.
Thanks

Bobby Clapp replied 2 years ago

After adding the hidden field and marking it required, you'll have to play with this part of the code from my previous link:

// when video ends
function onPlayerStateChange(event) {
if (event.data == 0)
window.location.href = 'https://www.duckduckgo.com';
}

Maybe change that to something like this:

// when video ends
function onPlayerStateChange(event) {
if (event.data == 0)
$("#field_6j2syb").val('video-played'),
}

5 Answers
Walter JonesWalter Jones answered 2 years ago
Could you use some conditional logic to hide the button until say a single radio button is clicked?  It’s not “automatic”, but basically they watch the video then click then radio field which makes the next button appear.  It doesn’t force the watching of the video per se, if that’s what you’re trying to accomplish, of those that want to circumvent the system.   But it may keep the honest one’s honest. 
Tudor Oman answered 2 years ago
Thanks for the reply - this is what I have been using in absence of a better solution. Maybe what I should do is figure out how to record the time in a hidden field and the the time on completion - and calculate what length it is and if not long enough for the video they can’t progress.
Walter JonesWalter Jones answered 2 years ago
Have you solved this yet?  I am working on a solution myself, I will let you know if I come up with anything. 
Tudor Oman replied 2 years ago

No I haven't managed to get it to work yet - any luck on your side?

Tudor Oman answered 2 years ago

I have had some progress - I used this code:

var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);   var player; // when video ends function onPlayerStateChange(event) { if (event.data == 0) window.location.href = 'https://www.duckduckgo.com'; } 

This code is put into WPCode plugin. In the form I put in this iframe into an html field:

<iframe id="player" width="640" height="360" src="https://www.youtube.com/embed/ZdP0KM49IVk?enablejsapi=1" frameborder="0" allowfullscreen />

This worked well as long as the form was on a page (wouldnt work on preview as the WPCode didnt load into it) - I then tried to use the advice on inserting a value into a hidden field by @Bobby Clapp - obviously changing the field key to the hidden field

// when video ends function onPlayerStateChange(event) { if (event.data == 0) $("#field_6j2syb").val('video-played'); }

but nothing happened - is the code above correct for using javascripot to insert a value into a field? Any help would be appreciated.    

Tudor Oman answered 2 years ago

Okay so a bit more digging with the help of all above and some posts on stack overflow. First thing was I needed to call jQuery - so changed the "$" to "jQuery". The below code is running on WPCode - haven't tested it directly in the form yet. Issues are I can automatically populate a text field but this doesn't seem to be recognised as an entry on conditional logic for the submit button - am not sure why as if I type the phrase it works fine - just not if filled via javascript. So have opted to do what @Bobby Clapp suggested and just make it required. This version, thanks to Deniz Kaya on stackoverflow can also be used for multiple videos.   You can see it in action at https://pembel.co.uk/s/video 
// 2. This code loads the IFrame Player API code asynchronously. // Code thanks to Deniz Kaya at https://stackoverflow.com/questions/20021429/youtube-api-onstatechange-listener-stops-working-after-switch-src-attr// 2. This code loads the IFrame Player API code asynchronously.
// Code thanks to Deniz Kaya at https://stackoverflow.com/questions/20021429/youtube-api-onstatechange-listener-stops-working-after-switch-src-attr
var tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: { 'autoplay': 1, 'controls': 1},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
playerReady = true;
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function floaded1() {player = new YT.Player('player1', {
events: {
'onStateChange': function (event) {
if (event.data == 0) {
jQuery('#field_7d91m').val('fgr32');
};
}
}
});
}

Chris AdamsChris Adams replied 2 years ago

When you change a field value with jQuery you need to tell the browser that field value has changed so any other functions that are 'watching it' will know.

All you need to add is .change() to this line: jQuery('#field_7d91m').val('fgr32').change();

Tudor Oman replied 2 years ago

Thanks for that will add

Tudor Oman replied 2 years ago

Is there a better way to include it for the this form?

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right