jquery - 禁用 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() 来控制每个鼠标按钮。

---

使用叠加层

用另一个 block 元素将 iframe 包裹在一个 block 元素中。使 iframe 及其兄弟元素 position:absolute 和父元素 position:relative。然后使同级 z-index 至少比 iframe 大 1。然后使用以下内容:

$(sibling element).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>