Solved
Detect state change on youtube iframe
I need to embed a youtube video in our survey and I need to know when it finishes, as I want to display a question or next button after the video goes to completion. We can't use a timer as we are allowing people to pause the video (unless I can pause the timer?), but not advance/fast forward the video. I have tried to get the template youtube iframe code (https://developers.google.com/youtube/iframe_api_reference) working within Qualtrics, but that doesn't seem to work as it seems to ignore the javascript, unless I'm missing something basic (which honestly I hope I am). I am putting the javascript in the Qualtrics.SurveyEngine.addOnload function. FWIW, It works just fine as a stand alone page, attached.
I am able to insert the youtube video using just an iframe but again, when I try to use youtube's API function onPlayerStateChange, I can never get that working.
TL;DR. Is there a way that I can detect when a youtube video goes to completion so I can show a question or next button?
I hope this made sense and that someone can point me to what I'm doing wrong, or at least tell me what I'm trying to do isn't possible.
Thanks!
Best answer by mylegshurt
Thanks again @rettweber for giving some suggestions on how to get things working. I did eventually figure it out. In the youtube API example, they create the video player object within a function delcared via:
function onYouTubeIframeAPIReady()
However, that was never being called within Qualtrics until I defined as:
window.onYouTubeIframeAPIReady = function()
Defining onYouTubeIfromAPIReady within the window fixed everything and I can now detect when the video reaches the end (i.e., it's state = end).
+6Hi @mylegshurt, Just curious, have you tried using alert boxes to identify whether the issue is getting a response or reading the state of the object?
Thanks @rettweber for the suggestion. Similarly, I've been putting console.log prints in the javascript to see what's being called and such, it never enters any of the functions that I believe it should. I do see the console prints when running the test code outside of Qualtrics.
+6@mylegshurt, weird things can influence the javascript. My advice is to try to test really small simple, build slowly to find out the point at which the code breaks. You don't have a nice IDE to work with, so you have to go old school. For instance, I found that code for a question I had worked until I added an SSO Authenticator block into the survey.
Sorry I can't be more help. I know that coding that way is frustrating. Please flag me if you find out where in the code it stops working. I would like to better understand issues associated with coding in the Qualtrics environment. Also note that you can add jquery, which may allow you to find another way to get at the item. You would need to make a link to the jquery library in the header portion of the look and feel of the document.
Thanks again @rettweber for giving some suggestions on how to get things working. I did eventually figure it out. In the youtube API example, they create the video player object within a function delcared via:
function onYouTubeIframeAPIReady()
However, that was never being called within Qualtrics until I defined as:
window.onYouTubeIframeAPIReady = function()
Defining onYouTubeIfromAPIReady within the window fixed everything and I can now detect when the video reaches the end (i.e., it's state = end).
+1When a survey has more than one video using "window.onYouTubeIframeAPIReady = function()" work well for the first video, however, if more videos are loaded in the window in the next other blocks (or in the next pages within a block), the function "onPlayerStateChange" of the YouTube API stops working for these other videos.
Before coming across with the proposed solution in this thread I called the function "onYouTubeIframeAPIReady()" manually by using a timeout:
window.setTimeout(function() {
onYouTubeIframeAPIReady();
}, 400);
Calling the "onYouTubeIframeAPIReady()" manually to make the "onPlayerStateChange" function work seems to be a good work around to solve these issues. With the timeout, the API responds when surveys have multiple videos.
Any ideas why "window.onYouTubeIframeAPIReady = function()" doe snot work properly in survey with several videos? I would like to make things work correctly without resorting to the use of timeouts??
+6I don't have much experience with embedding videos in Surveys. I suspect the issue is related to the reference to where the video is located and when the state of the windows is loaded. Qualtrics maintains a pretty tight control over when things happen on the page. I don't know how accurate referencing window will be to get it's state. It might be referencing a window that appears to have already closed or a different window than you expect completely. Sorry I can't be more helpful.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.