Javascript code for disabling mouse click for youtube videos

Question

I am designing an experiment making people watch a youtube video and I would like to keep them from controlling or stopping the video.

Also, it seems I can't use css since I am using a basic experiment software called Qualtrics.

I tried iframe "controls" and "disablekb" options but they didn't work. Also, "hideControls" doesn't work.

In the html (Qualtrics), I added this simple html code and then I typed most codes in javascript:

var videoId = 'vpTHi7O66pI';
var hideControls = true;

// 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')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
if (hideControls) {
    hideControls = 0;
} else {
    hideControls = 1;
}

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: videoId,
        events: {
            'onReady': onPlayerReady,
        },
        playerVars: {
            autoplay: 1,
            modestbranding: 1,
            rel: 0,
            disablekb: 1,
            enablejsapi: 1,
            showinfo: 0,
            controls: 0
        }
    });
}
function onPlayerReady(event) {
    player.contextmenu(function() {
     return false;
    });
    player.setPlaybackRate(1.25);
    player.loadVideoById({'videoId': videoId,
           'suggestedQuality': 'large'});
    event.target.playVideo();
}
window.setTimeout(function() {
    onYouTubeIframeAPIReady(); 
}, 1000);

I expect mouse clicking doesn't lead to pausing the video but it pauses.

Answer 1

Try adding the pointer-events: none; CSS property in an inline style element on the player's encapsulating element.

For example, in your HTML you can use:

<style>#player {pointer-events: none}</style>

Answer 2

You could add a transparent overlay over the player itself, like a div, then stop the click event when it happens in there (could be with CSS, setting it's pointer events as pointer-events: none).