即使鼠标悬停在"youtube"顶部,如何隐藏栏？

Question

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

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

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

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

Answer 1

由于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嵌入播放器代码而构建的新工具 - 高级Youtube嵌入代码生成器

Answer 2

这个问题在 2020 年及以后的答案是它现在根本不起作用。

Answer 3

由于 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%;
}

Answer 4

2023 年仍在工作::)

响应式嵌入，没有信息/控件，包括在 2021 年开始/暂停工作时隐藏头像和标题。与之前的答案类似，但使用宽高比而不是填充黑客并带有工作演示。

如果您需要控件，您可以使用JS API制作自己的控件。无论您如何嵌入 YouTube 视频，始终可以通过某种方式在源中找到它。

CodePen 演示

<div class="youtube-container">
    <iframe src="https://www.youtube.com/embed/WhY7uyc56ms?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=WhY7uyc56ms" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.youtube-container {
    overflow: hidden;
    width: 100%;
    /* Keep it the right aspect-ratio */
    aspect-ratio: 16/9;
    /* No clicking/hover effects */
    pointer-events: none;
} 

.youtube-container iframe {
    /* Extend it beyond the viewport... */
    width: 300%;
    height: 100%;
    /* ...and bring it back again */
    margin-left: -100%;
}

Answer 5

showinfo=0 因为已被弃用,将不再工作

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

Answer 6

以下适用于我:

?rel=0&fs=0&showinfo=0

Answer 7

要删除你的管controls,title你可以做这样的事情.

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

检查这个例子它的外观

showinfo=0用于删除标题,&controls=0用于删除音量,播放,暂停,消费等控件.

Answer 8

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

<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
• 请务必在每个项目之间添加"&".
• 对于自动播放:添加"autoplay = 1"
• For循环:添加"loop = 1"
• 隐藏控件:添加"controls = 0"

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

谢谢
BanyanTheme

Answer 9

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