Hide Next Button until HTML-embedded iFrame video is finished playing | XM Community
Skip to main content

I have a survey which asks respondents to view a video in entirety before proceeding to answer questions on the next page. I would like to hide the next button until the video is finished playing. Of note, I specifically don’t want to use a timer to hide the next button in case someone chooses to watch the video on a higher watch speed (e.g., 1.5x, 2x).

I’ve poured through the Community Forum looking for Javascript to accomplish this; however, my issue seems to be with using iFrame as the code I’ve found is written for other embedded video formats.

Does anyone have any experience with using JS with iFrame videos in Qualtrics? Thank you!!

Hi @JonesE,

 

Not sure if you have already tried getting iframe content, writing inside <div> element and then use the embedded code you have. Code for getting content of iframe is…

 var frameObj = document.getElementById(frameId);
 var frameContent = frameObj.contentWindow.document.body.innerHTML;

 Hope it helps.

Thanks,

JB

Thanks, @Jagdish! My colleague attempted this already, but it’s still not working. I’ve pasted her code below:

Qualtrics.SurveyEngine.addOnload(function() {
    this.hideNextButton();
  });



  Qualtrics.SurveyEngine.addOnReady(function() {
    var iframe = document.getElementById("video-player");
    var that = this;



    iframe.addEventListener("load", function() {
      var videoPlayer = iframe.contentWindow.document.querySelector("video");



      videoPlayer.addEventListener("ended", function() {
        that.showNextButton();
      });



      videoPlayer.addEventListener("timeupdate", function() {
        if (isVideoNearEnd(videoPlayer)) {
          videoPlayer.pause();
          that.showNextButton();
        }
      });
    });



    function isVideoNearEnd(player) {
      var currentTime = player.currentTime;
      var duration = player.duration;
      var threshold = 1.5; // Adjust this threshold as needed



      return currentTime >= duration - threshold;
    }
  });

 

Hi @JonesE 

Found a post related to your query . Hope this resolves it.

 

 

Leave a Reply


Terms & Conditions