Using iframe API to automatically advance to next page after a video has been watched | XM Community
Solved

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


Badge
I’d like to present several clips. Immediately after a particular clip is viewed, the survey automatically advances to the next page where the respondent answers questions. Next, another clip is presented. After that clip is viewed, the survey again advances to the next page where the respondent answers more questions. The NEXT button is hidden since I do not wish the respondents to skip watching the videos.

The problem is that the code works perfectly if I have only a single video in my survey, but if I include a second video, the survey does not advance to the next screen once that second video is completed. There is also no initial alert, which suggests that the event calls for the second video do not execute.

I’m hoping that you could help me figure out where I’ve gone wrong and correct the problem. Thank you in advance!

Here is a direct link to the example that illustrates the problem I’m experiencing: the survey advances automatically after the first clip but not after the second one:
https://stlawu.qualtrics.com/jfe/form/SV_50TVe8wS1JC44nP

1. I placed the following in the header (Look & Feel/Advanced/Header):

script src="https://stlawu.az1.qualtrics.com/ControlPanel/File.php?F=F_5tcW6K6DuYVG57L" type="text/javascript"></script>

2. This is the HTML code placed with the first clip (note that the video is just a short YouTube video for illustration purposes):

iframe id="video1" allowfullscreen="" frameborder="0" height="360" width="640" src="https://www.youtube.com/embed/NOQDkYzhmho?enablejsapi=1&controls=0&disablekb=1&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3" type="text/html"></iframe>

3. This is the HTML code placed with the second clip:

iframe id="video2" allowfullscreen="" frameborder="0" height="360" width="640" src="https://www.youtube.com/embed/pCCV3SKcJao?enablejsapi=1&controls=0&disablekb=1&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3" type="text/html"></iframe>


4. Finally, since I don’t want to display the Next button when the videos are displayed, this Javascript is placed under Qualtrics.SurveyEngine.addOnload(function() for both first and second video clip questions.

this.hideNextButton();

_Note that I omitted "<" from the beginning of the code in 1, 2, and 3 to be able to paste the code here._
icon

Best answer by mattyb513 10 July 2018, 15:18

View original

12 replies

Userlevel 6
Badge +6
I'm having a hard time debugging, but it might be handy to know that Qualtrics isn't reloading the page each time the page turns, instead just reloading the theme, which includes your custom header/footer. It acts as a single page app, so the `document` and `window` stay the same. Perhaps something is getting cached or stored in those places.
Badge
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.
Badge
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.
Userlevel 7
Badge +13
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!
Badge
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).
Badge
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.
Userlevel 6
Badge +6
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.

Leave a Reply