使用 HTML / CSS / JavaScript 隐藏 YouTube 视频控件（标题、稍后观看、分享）

Posted 2023-03-05

【中文标题】使用 HTML / CSS / JavaScript 隐藏 YouTube 视频控件（标题、稍后观看、分享）

【英文标题】：Hide YouTube video controls (Title, Watch later, Share) using HTML / CSS / JavaScript

【发布时间】：2020-08-31 19:23:23

【问题描述】：

我正在我的网站中嵌入 Youtube / Daily Motion Videos...

<iframe   src="https://www.youtube.com/embed/an-6owXUwdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

我不希望 Youtube 视频控件出现在我的网站上...

请查看附件，我想删除顶部的控件（以红色突出显示），还想删除底部的控件（以红色突出显示）。

以前可以在 youtube 视频中使用 showinfo 参数。现在该参数已弃用，请参考(https://developers.google.com/youtube/player_parameters#showinfo)

有没有其他方法可以使用 html / CSS / javascript 来做到这一点

或

我可以在任何播放器上运行 youtube 视频并且可以满足我的要求吗？

【问题讨论】：

你试过了吗？ Link 还有这个Link

不适合我...

【参考方案1】：

这样做的旧方法看起来像：

<iframe   src="https://www.youtube.com/embed/an-6owXUwdg?controls=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

我将 ?controls=0&showinfo=0 添加到查询字符串中。

不幸的是，当我尝试它时，它不再起作用。经过进一步研究，我发现隐藏您想要的内容的能力已被删除。 在此处查看信息：https://developers.google.com/youtube/player_parameters#showinfo

“注意：此参数已弃用，2018 年 9 月 25 日之后将被忽略。”

所以目前没有办法做到这一点。

【参考方案2】：

这不是最好的解决方案，但它可能对你有用

<div class="wrap">
    <iframe src="https://www.youtube.com/embed/o32suVhTyHM?autoplay=0&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=0&amp;modestbranding=1&amp;wmode=transparent" allowfullscreen="allowfullscreen"   frameborder="0"></iframe>
</div>

<style>
    .wrap
        height: 408px;
        overflow: hidden;
    
    iframe 
        position: relative;
        top: -64px;
    
</style>

【讨论】：

谢谢亲爱的，但它并没有隐藏视频的顶层（视频的标题、稍后观看和分享视频的图标）

controls=0 在 2021 年不起作用，因为 Youtube 已弃用此参数

【参考方案3】：

这在我们embedding HTML 中的视频时很常见，所以我们用一个简单的技巧来解决这个问题，我们将创建一个 iframe 的父（包装器）div 并添加 padding-bottom: 56.25%。这就是魔力所在。在 CSS 中，padding-bottom 属性可以接收一个百分比，这就是我们的 iframe 保持正确比例的原因。通过使用百分比。

.parent
    height: 0;
    margin: auto;
    z-index: 1;
    position: relative;
    padding-top: 25px;
    padding-bottom: 56.25%;
    display: block;
    overflow: hidden;

.parent iframe
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute;

【讨论】：

没有为我做任何事情。你有什么可行的例子吗？

【参考方案4】：

也许这会有所帮助：https://github.com/videojs/videojs-youtube

codepen.io/vinukumar-vs/pen/GRgpeqE

    <link rel="stylesheet" href="https://vjs.zencdn.net/5.4.6/video-js.min.css">
    <video
      id="vid1"
      class="video-js vjs-default-skin"
       
      data-setup=' "techOrder": ["youtube"], "sources": [ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"]'
    >
    </video>
    <script src="https://vjs.zencdn.net/5.4.6/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.0/Youtube.min.js"></script>