Disable Right-Clicking In HTML5 Video?

1 Views

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:

Read More
<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.

Post Views: 1

Related posts

Leave a Reply

7 comments

  1. 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;")

  2.  $(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.

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

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

  4. For React use =>

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

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

  5. 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; });
});