我正在尝试嵌入一个YouTube视频,但是,当鼠标悬停在它上面时,我还没有发现一种方法可以保持顶部的条形显示。就我的目的而言,重要的是用户无法直接链接回原始视频,以便他们可以重新观看视频。以下链接为youtube中的嵌入功能提供了命令:
https://developers.google.com/youtube/player_parameters#Overview
我使用了控件和disablekb功能来限制观看者跳过和重播视频的能力,我现在需要的是禁用显示在视频顶部的栏。
(我已经获得了http://www.youtube.com/embed/bFEoMO0pc7k?controls=0&disablekb=1&egm=1)
答案 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&fs=0&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视频:
有关详细信息,请访问此链接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>