Does anyone have guidance on how to hide the next button until a Youtube video has finished playing?
I have seen other posts on this topic, but haven't found anything specific to Youtube videos:
· https://community.qualtrics.com/XMcommunity/discussion/comment/50127#Comment_50127
· https://community.qualtrics.com/XMcommunity/discussion/6958/how-to-hide-the-next-button-until-a-video-embedded-from-google-drive-is-finished
· https://community.qualtrics.com/XMcommunity/discussion/6852/how-to-show-next-button-only-after-a-video-inserted-as-media-file-is-finished-playing%29
· https://community.qualtrics.com/XMcommunity/discussion/14377/make-vimeo-iframe-non-interactive-after-pressing-play
Thank you!
Right now, my next button is hidden, but never appears.
My HTML code is:
My JS code is:
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
this.getChoiceContainer().hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var my_vid = document.querySelector("myvid");
const player = new Youtube.Player("myvid");
that = this;
player.on("play", function () {
my_vid.style.pointerEvents = "none";
});
player.on("ended", function () {
that.showNextButton();
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
You can add a timer question and hide the next button in the logic itself. Let me know if this works for you!
https://community.qualtrics.com/XMcommunity/discussion/comment/51956#Comment_51956Hi grahulp5 ,
Thanks for the info!
Unfortunately, this will not work for my project. I tried the timer question, but it does not adjust for video buffering or pauses. When either happen, my survey-takers end up seeing the next button too early.
Hi MadelineB,
I am not familiar with the Youtube API but I imagine the syntax is different to the Vimeo one in your links (which I think some of your code is borrowed from). The documentation suggests to me that you could maybe do something similar:
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')m0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an
The ended event doesn't fire if you have autoplay enabled.
Try below JS
jQuery('#myvid').bind('ended', function() {
console.log("123");
jQuery('#NextButton').css('visibility','visible')
});
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.