CODEWITHSUNDEEP
jqueryhtml
Mukii kumar
Mukii kumar

Reputation: 179

Disable right click on vimeo player

I have 'iframe' tag - 

<iframe id="vdDisabled" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

I tried all jquery methods include 

$('iframe').bind('contextmenu', function(e) {return false;});
$('iframe').mousedown(function(e){ });

to disable right click but none of them helped me. Any one have idea how to do that

Upvotes: 2

Views: 1996

Answers (1)

zer00ne
zer00ne

Reputation: 43863

Update

Added an async function to synchronously run:

$('figcaption').css('z-index','0')

and then:

$('figcaption').css('z-index','1')

The mousedown event was added and a switch() to control each mouse button.

Use an Overlay

Wrap the iframe in a block element with another block element. Make the iframe and its sibling element position:absolute and the parent position:relative. Then make the sibling z-index at least 1 more than the iframe. Then use the following:

$(sibling element).on("contextmenu", function(e) { return false; });

There is some extra styling involved as well, review the demo. Note, there are some minor modifications to the iframe as well.

Demo

/*
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;
}
<figure>
  <figcaption></figcaption>
  <iframe id="vdDisabled" src="https://player.vimeo.com/video/76979871" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
</figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 3

Related Questions