The intent of the code below is to disable the right click of the mouse button and the context menu on a video container element (customer request). However, it also seems to knock out the left button click which we need in order to start the video.

How can I code this so that only the right click is disabled.

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

HTML is:

        <div class="video-container" data-videoname="" data-flash=".flv">
            <video id="flashContent" width="944" height="531" controls="controls">
                <source src=".mp4" type="video/mp4">
                <source src=".ogv" type="video/ogg">
            </video>
            <div class="poster">
                <div class="content">
                    <img src="/media/es-es/121111/different.png" width="944" height="531">
                    <img class="button" alt="Play this video" src="../../images/buttons/icon_video_play.png">
                </div>
            </div>
        </div>

The intent of the code below is to disable the right click of the mouse button and the context menu on a video container element (customer request). However, it also seems to knock out the left button click which we need in order to start the video.

How can I code this so that only the right click is disabled.

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

HTML is:

        <div class="video-container" data-videoname="" data-flash="http://yyy/video1.flv">
            <video id="flashContent" width="944" height="531" controls="controls">
                <source src="http://yyy/video1.mp4" type="video/mp4">
                <source src="http://yyy/video1.ogv" type="video/ogg">
            </video>
            <div class="poster">
                <div class="content">
                    <img src="/media/es-es/121111/different.png" width="944" height="531">
                    <img class="button" alt="Play this video" src="../../images/buttons/icon_video_play.png">
                </div>
            </div>
        </div>

• javascript
• jquery

Share Improve this question Follow edited Jul 3, 2014 at 12:55 wingyip asked Jul 3, 2014 at 12:16 wingyipwingyip 3,53633 gold badges3535 silver badges5757 bronze badges 4

• 2 Can you provide code of your element witch class .video-container? thanks – pes502 Commented Jul 3, 2014 at 12:18
• Show us your HTML code. – urbz Commented Jul 3, 2014 at 12:18
• 1 Your customer knows that this won't actually stop anybody from right-clicking on it who really wants to, right? Related: stackoverflow./questions/9756837/… – Cᴏʀʏ Commented Jul 3, 2014 at 12:19
• Have added the HTML to the original question. Yes Cory The limitations of this approach have been explained to the customer. – wingyip Commented Jul 3, 2014 at 12:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You should not need to check which button was clicked.

You can disable context menu straight from HTML without javascript by adding oncontextmenu="return false;" to the video tag.

Like this:

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

You can check whether the right mouse button was clicked with event.which in jQuery. 1 refers to left, 2 to middle and 3 to right mouse button.

Try to bind your contextmenu overwrite function when the right button is clicked and unbind it otherwise. I think that should do the trick.

$(document).ready(function () {
   $('.video-container').mousedown(function(event) {
      if(event.which === 3) {
         $('.video-container').bind('contextmenu',function () { return false; });
       }
       else {
         $('.video-container').unbind('contextmenu');
       }
   });
});

oncontextmenu="return false;" just add this in inside < video > element