Youtube Iframe 禁用暂停视频

Posted 2023-02-24

【中文标题】Youtube Iframe 禁用暂停视频

【英文标题】：Youtube Iframe disable pause video

【发布时间】：2012-11-05 23:06:56

【问题描述】：

我需要在我的网页上播放视频。但我需要拒绝控制。 我放了“controls = 0”，但是当我点击它时播放器有暂停动作。 我可以在 YouTube 播放器中禁用“暂停”操作吗？

【问题讨论】：

好问题，API 真的很差（我要在 2 年后发布）

【参考方案1】：

这是我的代码解决方案，可让视频自动播放，而无需在桌面上暂停但在移动设备上允许

  <style>
  .overlay 
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* knock out nasty borders */
    outline: 2px solid white !important;
    outline-offset: -1px;
    pointer-events: none;
  

  .wrapper-with-intrinsic-ratio 
    position: relative;
    padding-bottom: 56.25%;
  

  .element-to-stretch iframe 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffff;
  

  .wrapper-with-intrinsic-ratio .element-to-stretch 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  

  @media only screen and (max-width: 900px) 
    .noclick 
      display: none;
    
  

  .noclick 
    z-index: 2000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
</style>
<div class="target2">
<div class="noclick"></div>
<div class="wrapper-with-intrinsic-ratio">
<div class="element-to-stretch">
<div class="overlay"><iframe title="YouTube video player" src="https://www.youtube.com/embed/tgbNymZ7vqY?rel=0&amp;autoplay=1&amp;controls=0&amp;disablekb=1&amp;loop=1&amp;playlist=tgbNymZ7vqY&amp;playsinline=1&amp;iv_load_policy=3&amp;mute=1&amp;widgetid=1&amp;widget_referrer"   frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div>

注意让视频重复播放，而不是自动播放播放列表中的下一个项目 将播放列表设置为视频 id(youtube) 不会在浏览器视频中的移动设备上进行视频推荐

【参考方案2】：

在 DOM 元素上使用以下 CSS：

.ytplayer pointer-events: none;

【讨论】：

确保将 ytplayer 添加到 iframe 的类中

【参考方案3】：

如果您通过 html 显示视频并且可以访问用于显示视频的 CSS 类，则可以执行以下操作。

您的 HTML 将如下所示：

<iframe id="ytplayer" type="text/html"  
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

添加你选择的类名，我选择ytplayer

class="ytplayer"

我的例子如下所示

<iframe class="ytplayer" id="ytplayer" type="text/html"  
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

然后在您的 CSS 文件中添加修改类的规则。我使用了 ytplayer，但您可以选择不同的类名，请确保它与您上面使用的匹配。

.ytplayer 
pointer-events: none;
position: absolute;

应该这样做。

【参考方案4】：

这是一种阻止屏幕使用户无法点击任何内容的方法。

// block screen so user cant click
var blockDiv = $(document.createElement('div'))
        .attr('id', 'blockDiv')
        .height('100%').width('100%')
        .css('z-index':'3333', 'position' : 'absolute', 'top': '0', 'left':'0');
$('body').append(blockDiv);

【参考方案5】：

您可以尝试在视频上放置一个没有任何内容的 div 容器。换句话说，一个与视频本身大小相同的空白容器。这应该做的是当有人试图点击它时，他们实际上会点击它上面的透明容器并且无法暂停。这应该有效。您可能还需要更改 z-index 以确保空白 div 容器真正位于视频上方。 （首先使用背景颜色测试 div 容器，如果彩色框覆盖了视频，那么您可以返回并删除颜色，它会起作用。）祝你好运。

另外，将disablekb 参数设置为1，这样用户即使按空格键也不能暂停。

【讨论】：

这是否违反了 YouTube 的服务条款？

不确定，可能违反了权限和限制下的2b 限制使用服务或内容； youtube.com/static?template=terms#ad6952fd3c

【参考方案6】：

没有办法完全禁用暂停。

您可以在onStateChange 处理程序中侦听YT.PlayerState.PAUSED 事件，并在检测到一个事件时立即调用 playVideo()，但是...我不知道，这听起来不太友好.

【讨论】：

是的。这不是用户友好的，但这不是我的愿望。无论如何，谢谢。

【参考方案7】：

" ?controls=0 " 仅在播放器中隐藏底部控制面板，但在单击屏幕时播放/暂停将正常工作

这里是控制参数值：

controls=0 – 播放器控件不显示在播放器中。对于 AS3 播放器，Flash 播放器会立即加载。 controls=1 – 播放器控件显示在播放器中。对于 AS3 玩家来说， Flash 播放器会立即加载。 controls=2 – 播放器控件显示在播放器中。对于 AS3 玩家来说， Flash 播放器在用户启动视频播放后加载。

查看这篇文章，这真的很有帮助 https://developers.google.com/youtube/player_parameters