Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Disabling right click for video

I have a video that is being hosted on Vimeo and the client does not want the person to be able to have access to it after seeing it.  So we have it being played using iframe tags and have added a bit of javascript to block the right click of mouse, Ctrl + Shift + I, Ctrl+ Shift + J, Ctrl + S, Ctrl + U, and F12 key.

This all works except when you are hovering over the video frame itself and then you are able to right click and can get the video link.

I've asked about this before and am at a bit of  a loss as to what can be done.  Does anyone have any solutions for this?  Is there any way to block that?
asked May 20 by Jay Rutherford Gold (37,685 points)
I will add that on Edge I can't right click, but am able to with Chrome and Firefox.  Here is the script I currently have applied:
[code]
<script language="JavaScript">

  window.onload = function() {
    document.addEventListener("contextmenu", function(e){
      e.preventDefault();
    }, false);
    document.addEventListener("keydown", function(e) {
    //document.onkeydown = function(e) {
      // "I" key
      if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        disabledEvent(e);
      }
      // "J" key
      if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
        disabledEvent(e);
      }
      // "S" key + macOS
      if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
        disabledEvent(e);
      }
      // "U" key
      if (e.ctrlKey && e.keyCode == 85) {
        disabledEvent(e);
      }
      // "F12" key
      if (event.keyCode == 123) {
        disabledEvent(e);
      }
    }, false);
    function disabledEvent(e){
      if (e.stopPropagation){
        e.stopPropagation();
      } else if (window.event){
        window.event.cancelBubble = true;
      }
      e.preventDefault();
      return false;
    }
  };
</script>
[\code]
I can't say I've ever had to disable a context menu in a browser before.  I did some quick research with Google; some of it may be helpful, but it seemed like some workarounds were browser/version specific.

Watching the "contextmenu" event was one suggestion I saw.  The example I found mentioned returning false when this event runs.  You can add a "return false;" to your event handler to see if that helps.

On that note, I see that you are returning false in your "disabledEvent" function, but that value won't be doing anything as-is because the calls to this function don't do anything with the function's response.  You would need to change the function calls to "return disabledEvent(e);" in order for the "keydown" event to return false.

The most elaborate hack I found was here on StackOverflow:

https://stackoverflow.com/a/54938542

They're using CSS to try and make the context menu invisible to the respondent.  You could apply his demo to your code and see how dependable it is.

If you haven't already, I would make sure your client is clear on the fact that these are all hacks.  Once the information has made it to the respondent's computer, there is no 100% guaranteed way to ensure that the respondent cannot access the info and do with it as they please.  These solutions just try to make it more difficult to do so.

If your client is concerned about a respondent sharing content they are meant to keep to themselves, an NDA or a watermark added to the video might be options they want to consider.  These could help deter respondents from wanting to share info and potentially provide the client with some legal protections if the content is shared, but they would need to consult with an actual attorney about that.
Thanks as always for the input Zach.  I have spoken to my boss and my clients about privacy issues and that it doesn't really stop people from using phones to record, etc.  They still want to 'make it harder' by not allowing people to right click and save.

I looked at that link and the demo on the page seems to work but when I tried to apply it, it didn't seem to do anything.  I'll admit I'm a bit in over my head with the scripting that was provided there.

I put my iframe script in the same place they showed so that seems straight forward enough.  As far as all the other scripting shown I assumed that would be within javascript tags all together.  So this is what I put into the header of my question.  Have I gotten this completely wrong and are you able to provide any further assistance here?

[code]
<script language="JavaScript">
/*
This async function will synchronously control the click events
from happening asynchonously. Normally a timeout will finish
earlier.
*/
async function clickControl() {
  const noClick = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve($('figcaption').css('z-index', '1')), 1500);
    });
  }
  await noClick();
}
/*
Delegate contextmenu and mousedown on figcaption. The switch will
determine what to do when the left, middle, or right mouse button
is clicked.
*/
$("figcaption").on("contextmenu mousedown", function(e) {
  switch (e.which) {
    case 1: // Left
      $('figcaption').css('z-index', '0');
      break;
    case 2: // Middle
      break;
    case 3: // Right
      return false;
    default:
      break;
  }
  // Calling async function will wait for switch to finish
  clickControl();
});
/* Parent Wrapper Element */

figure {
  position: relative;
  width: 320px;
  height: 180px;
  /* For responsive video */
  /* padding-bottom: 56.25%;*/
  /* padding-top: 25px; */
  /* height: 0; */
}


/* Sibling Overlay Element */

figcaption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</script>
[\code]
That second block of code is CSS, not JS.  It should be surrounded by "<style>" tags, outside of the "<script>" tags.
Ahh, I see that.  I corrected that and two things that occur.  It definitely blocks clicking at all, but as I saw in the comment it also prevents me from clicking the play button.  Unfortunately 'autoplay' seems to no longer work on most of these sites from what I've found.  Do you see anything in that script that would differential clicking play vs. a right click?
https://github.com/vimeo/player.js/#play-promisevoid-passworderrorprivacyerrorerror

The Vimeo API does mention a function to programmatically play a video.  Perhaps a separate button could be added to the page that would trigger this function when clicked upon.  Or maybe that function just gets called once the page has loaded.  You could run that idea by your client and see if it would be acceptable.
In looking at it, it looks like that is after pause has been hit once play has been initiated.  I'm assuming that is all javascript they are showing?  How could I automatically call that or even put a button on the page for it?
I haven't seen your full code, but it looks likes the documentation expects you to create a simple "<div>" element and then use its ID to create a player element like this:

var player = new Vimeo.Player('my-vimeo-div-id', ...);


Then if you add a simple button to the page:

<button type="button" id="playButton">Play</button>


you should be able to trigger the play action like this:

$('#playButton').click(function(){
    player.play();
});
Zach I sent you an email with what I have at this point if you wouldn't mind taking a look.

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...