Make vimeo iframe non-interactive after pressing play. | XM Community
Solved

Make vimeo iframe non-interactive after pressing play.

  • 31 January 2021
  • 6 replies
  • 267 views
J

Hi,
I am trying to make my vimeo player non-interactive after the play button has been pressed. So that people can't press the pause or replay button. However, I am a total html and javascript noob. Any help will be appreciated :)
I have a vimeo iframe defined as follows:




I have been trying to add pointerEvents = none to the myvid id after pressing play, but I can't seem to interact with the frame correctly.
Thanks!

icon

Best answer by ahmedA 31 January 2021, 14:41

View original

6 replies

A
Rank
Userlevel 7
Badge +21

You'll need to do three things.

  • Add this as one of your choice options. Use the MC question type. 
    ">https://player.vimeo.com/api/player.js">
     Don't Show

  • Add the video and a play button the question HTML:





  • Add the JS to control the player and disable pointer events

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

Qualtrics.SurveyEngine.addOnReady(function () {
    var my_vid = this.getQuestionContainer().querySelector("#my_vid");
    my_vid.style.pointerEvents = "none";
    var player = new Vimeo.Player(my_vid);
    var my_button = this.getQuestionContainer().querySelector("#play_vimeo");
    that = this;

    my_button.onclick = function () {
        player.play();
    };

    player.on("ended", function () {
        that.showNextButton();
    });
});

A
Rank
Userlevel 7
Badge +21

Demo

J

Hi ahmedA,
Thanks a lot for your answer.
In the demo, this works exactly as I would want to. However, when I copy/paste everything into my survey, the button does not start the video. Do you know what I might be missing?
Also, is there an option to not allow the button to replay the video?

J

In the demo, the button also only works after reloading the block. Do you know what might cause this?

A
Rank
Userlevel 7
Badge +21

This is some weird glitch from Vimeo's end. Here's a workaround. Remove the button and change the JS to the following. The demo must have been updated by now.
Qualtrics.SurveyEngine.addOnload(function () {
this.getChoiceContainer().hide();
this.hideNextButton();
});

Qualtrics.SurveyEngine.addOnReady(function () {
var my_vid = document.querySelector("#myvid");
var player = new Vimeo.Player(my_vid);
that = this;

player.on("play", function () {
my_vid.style.pointerEvents = "none";
});

player.on("ended", function () {
player.destroy();
my_vid.innerHTML = "

The video has ended. Please wait as we load the next question.
"
that.clickNextButton();
});
});

However, I would suggest uploading the video to your Qualtrics Library and then using HTML video element to embed it. This will give you much more control over it.

J

Thank you so much, this is perfect!
I might take a look at the Qualtrics Library if I got more time, but this will do fine for now. Thanks again!

Leave a Reply


Terms & Conditions