You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在网站YouTube视频及object标签中禁用右键功能

禁用嵌入内容右键功能的解决方案

嘿,我来帮你搞定这两个禁用右键的需求,这在自定义嵌入内容时确实是个常见的小问题:

一、禁用嵌入YouTube视频的右键功能

首先得说明:YouTube官方的嵌入参数里并没有直接禁用右键的选项,但我们可以通过前端事件监听的方式来实现。

因为YouTube的iframe是跨域资源,直接给iframe本身绑定右键事件会被浏览器的同源策略限制,所以最可靠的方法是给视频套一个父容器,阻止容器的右键菜单弹出:

  1. 先把iframe放在一个容器里:
<div id="youtube-wrapper">
  <iframe src="https://www.youtube.com/embed/你的视频ID" frameborder="0" width="80%" height="315"></iframe>
</div>
  1. 给容器添加CSS,让它完全覆盖iframe(确保用户点击的是容器而非iframe):
#youtube-wrapper {
  position: relative;
  width: 80%;
  height: 315px;
}
#youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  1. 绑定右键阻止事件:
document.getElementById('youtube-wrapper').addEventListener('contextmenu', function(e) {
  e.preventDefault(); // 阻止右键菜单弹出
});

注意:这种方法只能阻止右键菜单弹出,无法完全禁止用户通过其他方式(比如浏览器控制台、查看页面源码)获取视频链接,这是前端方案的局限性哦。

二、禁用标签的右键功能

针对你给出的<object>标签,实现起来更简单——直接给它绑定contextmenu事件即可:

<object id="tlClogo" class="tlClogo" data="url" width="80%" height="315"></object>

<script>
document.getElementById('tlClogo').addEventListener('contextmenu', function(e) {
  e.preventDefault();
});
</script>

如果你的<object>加载的是跨域资源,上面的方法可能失效,这时候同样可以用容器覆盖法:把<object>放到一个父容器里,给容器绑定右键阻止事件,再用CSS让容器完全覆盖<object>,操作逻辑和YouTube视频的方案一致。

内容的提问来源于stack exchange,提问作者Athira Devi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.25 07:22:13