禁用右键单击vimeo播放器

Question

我有'iframe'标签-

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

我尝试了所有jquery方法包括

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

禁用右键单击，但是没有一个帮助我。任何人都知道该怎么做

Answer 1

更新

添加了异步功能以同步运行：

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

然后：

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

添加了mousedown事件和一个switch()以控制每个鼠标按钮。

---

使用叠加层

将iframe与另一个block元素包装在一起。制作iframe及其兄弟元素position:absolute和父项position:relative。然后，使同级z-index至少比iframe多1。然后使用以下命令：

  

$( 兄弟元素 ).on("contextmenu", function(e) { return false; });

还涉及一些额外的样式，请查看演示。请注意，对iframe也有一些小的修改。

---

演示

/*
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>