Disable Right-Clicking In HTML5 Video?

Question

I'm using an HTML5 video player on my website and I want to disable right-clicking on all my videos.

I tried using this code and it doesn't work:

<script type="text/javascript">
$(document).ready(function(){
$('#videoElementID').bind('contextmenu',function() { return false; });
});
</script>

I'm using WordPress and placed the function above in the header.php file.

How can I check what is the #videoElementID name for my player? I tried with all the DIV elements on the page and it still doesn't work. I know this won't prevent users to download my videos but I really need to make this work.

possible duplicate of [How do I disable right click on my web page?](http://stackoverflow.com/questions/737022/how-do-i-disable-right-click-on-my-web-page) — kol, Apr 10 '14 at 15:43

score 60 · Answer 1 · edited Jul 26 '22 at 18:26

60

My favorite method which is quick and easy and does not require javascript is to add the oncontextmenu="return false;" to the video tag.

So something like this:

<video oncontextmenu="return false;" id="my-video-player" width="854" height="480" controls autoplay>
  <source src="https://example.com/link-to-my-video.mp4" type="video/mp4">
</video>

You can also trigger it programatically such as:

document.querySelector('video').setAttribute('oncontextmenu', "return false;")

edited Jul 26 '22 at 18:26

Anthony

13,434
14
60
80

answered Dec 04 '17 at 02:09

jsherk

6,128
8
51
83

I just found that you can circumvent this by right clicking, holding the mouse button, moving the mouse slightly then releasing... somehow it then still opens the context menu!? – Sorcy May 12 '20 at 06:49
1

Note this _does_ require JavaScript! The `return false;` is JavaScript. If you disable JavaScript, the context menu appears as normal. – jameshfisher Jan 26 '21 at 17:07

score 19 · Answer 2 · answered Apr 10 '14 at 16:40

19

 $(document).ready(function() {
    $("video").bind("contextmenu",function(){
        return false;
        });
 } );

This should disable right click on all the video elements in that page. Hope this helps.

answered Apr 10 '14 at 16:40

Atul

874
1
7
17

I just tried and it still doesn't work. I tested with both Firefox and Chrome. Any ideas? – user3517251 Apr 10 '14 at 17:19
1

@user3517251 - is it happening only for **video** element, or all other elements. i mean, did this also not work `$(document).bind("contextmenu",function(){ return false; });` – Atul Apr 10 '14 at 17:32
this doesn't work either. it has no effect. perhaps something blocks it. any ideas what it could be? – user3517251 Apr 10 '14 at 17:39
7

I managed to get it to work by adding the following values in the DIV element of the Video.
here's the video embedcode
. It works great in Firefox, Chrome and IE. – user3517251 Apr 10 '14 at 18:06
ideally it should have worked ... a check you can do is whether jquery.js file was loaded or not. You can do it by placing- `alert("jquery loaded")` inside your `$(document).ready(function(){});` – Atul Apr 10 '14 at 18:10

score 4 · Answer 3 · answered Dec 18 '20 at 10:20

4

I was recently trying to disable right click for video element. This code worked for me.

 document.querySelector("video").addEventListener("contextmenu", (event) => {
      event.preventDefault();
    });

answered Dec 18 '20 at 10:20

Sudhir

312
1
4
10

I would change it to querySelectorAll with a forEach in case you have multiple videos on a page. – Yaniv Wainer Jan 20 '21 at 13:42

score 4 · Answer 4 · answered Dec 01 '21 at 03:04

4

For React use =>

onContextMenu={e => e.preventDefault()}

<video onContextMenu={e => e.preventDefault()}>
  <source src={`your_video_url`} type="video/mp4"/>
</video>

answered Dec 01 '21 at 03:04

Aditya Suman

41
2

score 1 · Answer 5 · edited Mar 18 '15 at 17:33

1

The right click menu is a function of the web browser. To disable it, you can try to add the following JavaScript to the head section of your web page, just before the tag.

jQuery(document).ready(function(){
    jQuery('video').bind('contextmenu',function() { return false; });
});

edited Mar 18 '15 at 17:33

Sam Hanley

4,707
7
35
63

answered Mar 18 '15 at 17:15

bobo

11
1

score 1 · Answer 6 · answered May 04 '18 at 12:09

1

It works fine for me.

$(document).bind("contextmenu",function(ev){
    if(ev.target.nodeName=='VIDEO')
    {
        return false;
    }
});

answered May 04 '18 at 12:09

nacesprin

392
7
16

score 0 · Answer 7 · edited Nov 30 '20 at 14:17

0

Better to use onContextMenu={(e) => e.preventDefault()} under the video tag of HTML5.

edited Nov 30 '20 at 14:17

Suraj Rao

29,388
11
94
103

answered Nov 30 '20 at 14:14

yuvraj singh

1
1

Could you add an explanation to the answer? Why is it better? Better then what? – Petr Aleksandrov Nov 30 '20 at 15:06

Disable Right-Clicking In HTML5 Video?

7 Answers7

Linked