Using iframe API to automatically advance to next page after a video has been watched

This is helpful, thank you. Your answer suggests that I can troubleshoot by browsing Javascript resources for a case where the iframe content reloads while the page stays the same.

Hi there, I was wondering if you would mind answering a question, as I am struggling with onYouTubeIframeAPIReady() also, but it seems like you have already solved the issue I am having. I simply want my survey to advance immediately after one video. I copied your scripts with minor changes (the ID I assigned the iframe, the videos themselves) [thanks for posting your code!]. Unfortunately, my survey does not advance and I cannot figure out why. :( Here is the iframe code that contains the video (with initial "<" removed): iframe id="video1" allowfullscreen="false" frameborder="0" height="480" width="640" src="https://www.youtube.com/embed/hX-mnTqfx7o?autoplay=0&rel=0&controls=0&showinfo=0&disablekb=1&fs=0&modestbranding=1"></iframe> Here is the code I put in script tags inside my header: 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 player1; function onYouTubeIframeAPIReady() { player1 = new YT.Player('video1', { events: { 'onReady': function(){ alert("here finally"); }, 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { $('NextButton').click(); } } Finally, I put "this.hideNextButton();" in the javascript for the video in addOnload() function. I saw elsewhere that you need to use "window.onYouTubeIframeAPIReady = function(){};" in order to get onYouTubeIframeAPIReady() to work. Encapsulating my header code in this bit of code does not help....but perhaps I'm placing it incorrectly? I do find that the following code runs from the header: "window.onYouTubeIframeAPIReady = function(){ alert("random text"};" so I'm not sure why the code that worked for you is not workign for me. Any advice would be most appreciated.

If you give me the email address associated with your Qualtrics account, I'll share with you the survey where the auto-advance feature works.

Hey @sonyper! You can always export your survey QSF and upload it to this post so others can see where you have the auto-advance feature working! Check out this page for more info!

Good point. The survey with the working version of the code is attached.

Thanks @sonyper - I will check this out right away!

So....Your survey works for me (the two alerts pop up immediately and it doesn't advance after second video though). However, when I copy and paste your header code into the header for my study, it doesn't work (and the player ID name in the iFrame is the same, so it's not that). I also tried just using your iframe code (including the video-everythign copy and pasted) and it also doesn't work within my study. It is perhaps worth saying that when I copy your code directly into my study, I also don't get the pop-up alerts so it seems like for some reason the script in the header is being ignored in my current study...but works in the copy of the study I uploaded to my account (so not an account issue). I'm stumped. Any ideas?

Update: I created a new study from scratch and incorporated @sonyper's code. It worked fine. I then swapped my link in and it all ran fine (and I discovered that your code included the enablejsap=1 option in the iframe which was probably one issue). However, when I added a screen to preceed the video, the code no longer worked. So I guess I have a new question to explore. Just wanted to say thanks for your help (and if you know how to get around this new issue, by all means let me know as I will be grateful).

I found that browser compatibility can be an issue when using Javascript with Qualtrics, so you try it in a different browser. More generally, however, this is a problem for someone who understands Javascript and its integration with Qualtrics better than I do. I gave up trying to fix the issue with the second video not advancing in my survey, so I omitted the advancing function altogether. You could try posting posting this code into JSfiddle or Codepen.io to troubleshoot the Javascript part. Another option is to hire a Qualtrics developer to write the code that works across browsers and can withstand YouTube's shifting video embedding policies.

It won't work on subsequent pages because `onYouTubeIframeAPIReady()` is not being called. Try adding this to your code and see if it works: ```javascript window.setTimeout(function() { onYouTubeIframeAPIReady() }, 500); ``` This code is loading in the YouTube API, which will be injected in the `<head>`. Because it's a single page app, there is no need to load this again. You should just be able to call that function above instead: ```javascript var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); ```

Update 2: If I am understanding things correctly, this probably occurs becuase the JFE engine does not create a new header from page to page of the survey. If anyone knows how to work around this, I would be very grateful for your input.