即使将鼠标悬停在“ youtube”顶部，如何隐藏该栏？

71

我正在尝试嵌入youtube视频，但是，我还没有找到一种方法来防止鼠标悬停在顶部时显示在顶部。就我的目的而言，重要的是用户不能直接链接回原始视频，以便他们可以重新观看视频。以下链接提供了将功能嵌入youtube的命令：

https://developers.google.com/youtube/player_parameters#概述

我已经使用控件和disablekb功能来限制观看者跳过和重播视频的能力，我现在需要禁用出现在视频顶部的栏。

（在哪里我获得了http://www.youtube.com/embed/bFEoMO0pc7k?controls=0&disablekb=1&egm=1）

youtube embed

— 用户名
source

是“ disablekb”是错字还是某些功能？

— 丹尼尔·斯普林格

disablekb是一项禁用键盘的功能

— 文盲作者，

116

由于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嵌入代码生成器

— Shan Eapen Koshy
source

没用，YouTube徽标和链接现在显示在控制栏上。

— Amod

16

showinfo已被弃用，从2018年9月开始将被忽略。不幸的是，它将不再起作用。

— MKF

19

2020年，此问题的答案是“现在根本不起作用”。

— 苏山
source

2

绝对正确。您是否找到了隐藏标题，共享和稍后观看按钮的解决方案？

— 阿里·拉扎

不，我们不能覆盖他们的API。

— 苏珊

18

showinfo=0自2018年9月25日起已弃用，它将不再起作用。

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

— 达特
source

我正在研究类似的问题atm，并找到了您的评论。在文档中何处表明showinfo已被弃用？我看不到

— Pierre

1

就在这里 developers.google.com/youtube/…–

— Daut

3

正确，页面的英文版说已弃用，而法语版则不推荐...傻。好，谢谢！

— Pierre

8

以下对我有用：

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

— 雪莉·阿什比（Shirley Ashby）
source

在我的情况下不起作用

— Anjali Sharma

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并用于删除音量，播放，暂停，消耗等控件。

— 乌曼·帕特瓦（Umang Patwa）
source

@Flimmshowinfo=0在发布此答案大约一年后于2018年被删除。

— Eliezer Berlin

showinfo = 0不起作用

— Anjali Sharma

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之后开始修改
确保在每个项目之间添加“＆”。
对于自动播放：添加“自动播放= 1”
For循环：添加“ loop = 1”
隐藏控件：添加“ controls = 0”

有关更多信息，请访问此链接https://developers.google.com/youtube/player_parameters#autoplay

感谢
BanyanTheme

— 吉拉尼A
source

1）我无法到达链接。2）这是唯一起作用的一个。您能否解释为什么必须使用version = 3才能进行这项工作？先前的答案似乎没有使用它，但是它们对我没有用。

— Preston Rodeniser

我看到链接正在工作，并且不需要version = 3。为什么使用版本？回答：“选择要播放的内容部分已更新，以说明如何使用YouTube数据API（v3）而非旧版API查找YouTube视频ID和播放列表ID。”

— Jilani A

6

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

— 猩猩
source

2

我要禁用iframe的悬停状态的操作是pointer-events:none在CSS样式中使用。它显示了加载时的信息，但是在那之后悬停就不会触发显示信息。

— 用户名
source

这将在2020年生效（只要您也正确地提供playerVars +自动播放）-叠加层会短暂显示然后消失。

— BenedictWilkinsAI

-1

打开YouTube视频。单击共享选项。在共享选项中，单击嵌入标签。您可以在embed标签中看到一些复选框。未选中显示视频标题和播放器操作。之后，只需复制框架标签即可。

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

— 杰文·帕瓦尔（Jeevan Pawar）
source

3

自2018

— Pierre