CODEWITHSUNDEEP
javascriptiframeyoutubequaltrics
Minjae
Minjae

Reputation: 31

Javascript code for disabling mouse click for youtube videos

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.

Upvotes: 3

Views: 3259

Answers (5)

FEMax
FEMax

Reputation: 31

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!

Upvotes: 0

FEMax
FEMax

Reputation: 31

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.

Upvotes: 0

MJHd
MJHd

Reputation: 166

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

Upvotes: 1

Zweih
Zweih

Reputation: 178

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>

Upvotes: 4

juandxce
juandxce

Reputation: 46

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

Upvotes: 1

Related Questions