即使鼠标悬停在“youtube”顶部,如何隐藏栏?

时间:2013-08-20 18:33:32

标签: youtube embed

我正在尝试嵌入一个YouTube视频,但是,当鼠标悬停在它上面时,我还没有发现一种方法可以保持顶部的条形显示。就我的目的而言,重要的是用户无法直接链接回原始视频,以便他们可以重新观看视频。以下链接为youtube中的嵌入功能提供了命令:

https://developers.google.com/youtube/player_parameters#Overview

我使用了控件和disablekb功能来限制观看者跳过和重播视频的能力,我现在需要的是禁用显示在视频顶部的栏。

(我已经获得了http://www.youtube.com/embed/bFEoMO0pc7k?controls=0&disablekb=1&egm=1

10 个答案:

答案 0 :(得分:112)

此答案不再适用,因为YouTube已弃用showinfo参数。

您可以添加&showinfo=0来隐藏嵌入式播放器的标题栏。您无法完全删除原始视频的所有链接。这是你能做的最好的事情

<iframe width="560" height="315" src="//www.youtube.com/embed/videoid?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>

此代码将删除标题栏,控件中的YouTube品牌,控件(如果需要控件,可选delete controls=0)。但视频链接会在视频上显示白色的YouTube徽标。

更新1:以下是我为生成自定义youtube嵌入播放器代码而构建的新工具 - Advanced Youtube Embed Code Generator

答案 1 :(得分:16)

这个问题在2020年的答案是 现在根本无法使用。

答案 2 :(得分:9)

showinfo=0将不再起作用,因为自 2018年9月25日起已弃用。

https://developers.google.com/youtube/player_parameters#showinfo

答案 3 :(得分:8)

以下适用于我:

?rel=0&amp;fs=0&amp;showinfo=0

答案 4 :(得分:8)

要删除您 controls title ,您可以执行此类操作。

<iframe width="560" height="315" src="https://www.youtube.com/embed/zP0Wnb9RI9Q?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen ></iframe>

check this example how it look

showinfo=0用于删除标题&controls=0用于删除控件,例如音量暂停下,的花费

答案 5 :(得分:6)

你可以尝试一下这对我有用。

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/PEwac2WZ7rU?rel=0?version=3&autoplay=1&controls=0&&showinfo=0&loop=1"></iframe>
</div>

使用 Bootstap

进行响应式嵌入

允许浏览器根据其包含块的宽度确定视频或幻灯片尺寸,方法是创建一个可在任何设备上正确缩放的内在比例。

样式YouTube视频:

  • 选择YouTube视频,点击“分享”,然后点击“嵌入”。
  • 选择嵌入代码并复制。
  • 在verison = 3之后开始修改 www.youtube.com/embed/VIDEOID?rel=0?version=3
  • 请务必添加&#39;&amp;&#39;每个项目之间。
  • 对于自动播放:添加&#34; autoplay = 1&#34;
  • For循环:添加&#34; loop = 1&#34;
  • 隐藏控件:添加&#34; controls = 0&#34;

有关详细信息,请访问此链接https://developers.google.com/youtube/player_parameters#autoplay

感谢
BanyanTheme

答案 6 :(得分:5)

由于YouTube已弃用showinfo参数,因此您可以欺骗播放器。 Youtube将始终尝试将其视频居中,但徽标,标题,稍后观看按钮等将始终分别位于左侧和右侧。

所以您可以做的是将Youtube iframe放在div中:

<div class="frame-container">
   <iframe></iframe>
</div>

然后,您可以将框架容器的尺寸增加到浏览器窗口之外,同时对齐它,以使iframe视频居中。示例:

.frame-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */  
    padding-top: 25px;
    width: 300%; /* enlarge beyond browser width */
    left: -100%; /* center */
}

.frame-container iframe {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}

最后将所有内容放入包装div中,以防止由于300%的宽度而导致页面拉伸:

<div class="wrapper">
   <div class="frame-container">
      <iframe></iframe>
   </div>
</div>

.wrapper {
   overflow: hidden;
   max-width: 100%;
}

答案 7 :(得分:2)

我为禁用iframe的悬停状态所做的就是在CSS样式中使用pointer-events:none。它会显示加载时的信息,但在此之后,悬停就不会触发显示信息。

答案 8 :(得分:0)

正如其他答案所述,showinfo=0 查询参数不再有效。使用 iframe 嵌入方法时,YouTube 始终提供对视频网址的访问。

解决此问题的一种方法是使用单独的播放器完全覆盖播放器。例如,Plyr 就是这样做的。

在 WordPress 的情况下,有专门的插件来阻止访问视频,例如 Protected Video

答案 9 :(得分:-1)

打开YouTube视频。单击共享选项。在共享选项中单击嵌入标记。 你可以在embed标签中看到有一些复选框。取消选中显示视频标题和播放器操作。在这之后只是复制框架标签。

<iframe width="100%" height="350" src="https://www.youtube.com/embed/uqhnxAjK7qY?autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>