Make vimeo iframe non-interactive after pressing play. | XM Community
Skip to main content
Michael_Cooksey
Administrator
26 days ago
Solved

Make vimeo iframe non-interactive after pressing play.

  • January 31, 2021
  • 6 replies
  • 517 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!

Best answer by ahmedA

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.

View original

    6 replies

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • 2028 replies
    • January 31, 2021

    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
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • 2028 replies
    • January 31, 2021

    Demo

    J
    • joerips
    • Author
    • 3 replies
    • January 31, 2021

    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
    • joerips
    • Author
    • 3 replies
    • January 31, 2021

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

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • 2028 replies
    • Answer
    • January 31, 2021

    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
    1 person likes this
    • J
      joerips
    J
    • joerips
    • Author
    • 3 replies
    • January 31, 2021

    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