youtube 嵌入播放器自定义

Question

尝试了不同的自定义方法（隐藏 YouTube 标题、徽标等）。但仍然无法正常工作。我的目标是主要隐藏标题顶部栏。因此，如果目前可行，请寻求一些指导？

*尝试过css方法、iframe viewport方法等

Answer 1

好吧，既然youtube弃用了参数showinfo，有一个解决办法，你可以使用html和css。

首先，您必须将 youtube iframe 放在一个 div 中：

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

接下来，您必须增加框架的大小，使其位于浏览器窗口之外，然后将其居中对齐，因为 youtube 仅尝试将视频居中并将其徽标保留在两侧，这个技巧应该有效.

.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 class="wrapper">
   <div class="frame-container">
      <iframe></iframe>
   </div>
</div>

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

编辑 1：如果您想禁用建议的视频并只允许暂停，则必须将 url 替换为：

在这种情况下，您必须将 youtube 网址替换为：

https://www.youtube.com/embed/VIDEOID?playlist=VIDEOID&loop=1

当视频循环播放时，建议的视频将被禁用，即使禁用了控件，您也可以通过单击视频来暂停视频。