No I haven't managed to get it to work yet - any luck on your side?
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.
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');
};
}
}
});
}
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();
Thanks for that will add
Is there a better way to include it for the this form?
Please login or Register to submit your answer
Does this reference of javascript code help?
https://www.webmastercampus.com/javascript-autoplay-youtube-video-and-redirect-when-video-ended/
Thanks this does work but cant seem to get it to work within a form
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.
@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
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'),
}