Make vimeo iframe non-interactive after pressing play. | XM Community
Skip to main content

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!

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();
    });
});

Demo

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?

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

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.

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