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.

Can you provide a code snippet so we can test; it would be easier to help... — V. Sambor, Aug 08 '19 at 18:20

score 3 · Answer 1 · answered Aug 08 '19 at 18:46

3

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>

answered Aug 08 '19 at 18:46

Zweih

168
10

1

thank you i used your solution and worked as charm. – Wael Mahmoud Dec 31 '21 at 13:08

score 1 · Answer 2 · answered Aug 08 '19 at 18:32

1

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).

answered Aug 08 '19 at 18:32

juandxce

46
4

MJHd · Answer 3 · 2019-08-09T01:32:15.487

1

I have the most awesome answer if you're flexible about a JS solution - CSS can actually do this:

#container_id {
    pointer-events: none;
}

Now the mouse won't interact with the controls at all (hover or click)

Edit: If JS is a requirement:

document.getElementById('container_id').addEventListener('click', function(event){
    event.preventDefault()
}

Final edit: Sorry, did not read as carefully as I should :(

Looks like you are loading the player markup into var player - you should be able to add the prevent default onclick directly to that var as such:

player.onclick = function(event){ event.preventDefault() }

Good luck!

In response:

Each approach mentioned above was a different option, the middle one supposes access to the DOM, but I'm starting to sense you can't directly manipulate it based on what you've said - so I recommend the last implementation, I would try either of these:

Under:

player.setPlaybackRate(1.25);
player.loadVideoById({'videoId': videoId,
       'suggestedQuality': 'large'});

Add:

player.onclick = function(event){ event.preventDefault() }

Or:

event.target.onclick = function(event){ event.preventDefault() }

I like the first one better for readability, but they might both work, without more info about the [ YT.Player ] (I assume a library you're using) I can't be sure the object bound to [ var player ] will allow it's onclick to be modified (some libraries include measures to prevent things like that) - so I include option 2 as a fallback - let me know if that doesn't work because there are other event binding options...

The CSS approach at the top is your last ditch effort, it would solve the problem on it's own, no need for any of the JS. It would be added between the

<style> and </style>

tags in the documents head, like so:

<head>
[ STUFF ]
<style>
  #[THE_ID_OF_YOUR_CONTAINER] {
     pointer-events: none;
  }
</style>
</head>

or included in a stylesheet - likely named [something].css on your server as just:

iframe {
  pointer-events: none;
}

edited Aug 09 '19 at 01:32

answered Aug 08 '19 at 18:37

MJHd

166
1
10

I am not sure where I should put the code. It didn't work when I simply added your last code, or when I put it below the line "function onYouTubeIframeAPIReady() {" in my code. Should I add all three codes that you suggested? – Minjae Aug 09 '19 at 00:45
Answer updated to show implementation options - there are other approaches if that doesn't work, but at least one of them should... – MJHd Aug 09 '19 at 01:01
I tried your codes and they didn't work. I think I am observing mouse hovering itself interacts with youtube video controls although I blocked the control function but youtube still shows the title even before mouse clicking. I am not sure if this will help though. – Minjae Aug 09 '19 at 01:12
WOW - The YouTube player is AGGRESSIVE 8O - so, the options left are to disable the event listeners that they have bound, by name - which would require either digging through the player's source code, or the documentation, and hoping they were attached with names (if they aren't - they can't be unbound), I posit the CSS rout is much more tenable, I'm still not entirely sure if JS is a requirement or not, but it's not very realistic here... – MJHd Aug 09 '19 at 01:31
I added one last edit - the CSS for the iframe (very bottom), I think this is your best option – MJHd Aug 09 '19 at 01:32
you know, if you can't edit the stylesheet directly, you could try modifying the CSS of the iframe with JS, is there a way to add CSS, or does it absolutely have to be there in the JS? – MJHd Aug 09 '19 at 01:43
1

I really appreciate your comment. I don't know why, (probably it is me) but I failed to use your way. I also couldn't find CSS editor in Qualtrics too. Instead, I followed Corey Deschambault's method of overlapping another layer above the video: https://stackoverflow.com/questions/13429884/youtube-iframe-disable-pause-video – Minjae Aug 09 '19 at 13:44

score 0 · Answer 4 · answered May 26 '21 at 16:05

I know this is an old thread, but recently ran into the same problem. I am trying to show a video as part of an experiment on memory. The plan is to record button presses, so it would be tricky with the timing if viewers can pause the video.

The video is hosted here: https://muse.ai/docs#embed-player, which should in theory allow me to implement the solutions above. However, the movie is still pausable on a mouse-click.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
    <style>
      #container-name{
         pointer-events: none;
      }
    </style>
    <script src="https://muse.ai/static/js/embed-player.min.js"></script>
    <script>
    </script>
  </head>

  <body style="width: 840px; background-color: grey;">

<div id="container-name" ></div>

<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
  const player = MusePlayer({
    container: '#container-name',
    video: 'zT4Vmcc',
    width: 800,
    autoplay: true,
    style: 'no-controls',
  });
  event.target.onclick = function(event){ event.preventDefault() }
</script>

  </body>
</html>

As you can see I tried to implement two of the solutions above. Any input would be apprechiated.

score 0 · Answer 5 · answered May 26 '21 at 16:45

I was able to solve this with this:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
    <style>
    </style>
    <script src="https://muse.ai/static/js/embed-player.min.js"></script>
    <script>
    </script>
  </head>

  <body style="width: 840px; background-color: grey;">

<div id="container-name" ></div>

<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
  const player = MusePlayer({
    container: '#container-name',
    video: 'zT4Vmcc',
    style: 'no-controls',
    logo: false,
    search: false,
    title: false,
    autoplay: true,
    shortcuts: false,
    css: '*{pointer-events:none!important;}',
  });
</script>

  </body>
</html>

Which is also what juandxce suggested, thanks!

Javascript code for disabling mouse click for youtube videos

5 Answers5

Linked