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

我正在我的网站上嵌入Youtube/每日动态视频

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

我不希望Youtube视频控件在我的网站上可见

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

以前，在youtube视频中使用showinfo参数是可能的。现在该参数已被弃用，reference（）

使用HTML/CSS/JavaScript还有其他方法可以做到这一点吗

或

---

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

旧的方法是：

<iframe width="560" height="315" 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

不幸的是，当我尝试它时，它不再有效。经过进一步的研究，我发现隐藏你想要的东西的能力已经被移除了。 请参见此处的信息：

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

---

所以目前没有办法

这不是最好的解决方案，但它可能适合您

<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" width="100%" height="408" frameborder="0"></iframe>
</div>

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

.包裹{
高度：408px；
溢出：隐藏；
}
iframe{
位置：相对位置；
顶部：-64px；
}

这是我们在HTML中嵌入视频时经常遇到的问题，因此我们用一个简单的技巧解决了这个问题，我们将创建

iframe

的父（包装器）div，并添加

填充底部：56.25%

。这就是魔力所在。在CSS中，padding-bottom属性可以接收一个百分比，这是使iframe保持正确比率的原因。通过使用百分比

.parent{
身高：0；
保证金：自动；
z指数：1；
位置：相对位置；
填充顶部：25px；
垫底：56.25%；
显示：块；
溢出：隐藏；
}
.父iframe{
显示：块；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：5；
位置：绝对位置；
}

也许这会有帮助：

您试过这个吗？而且这个对我不起作用…谢谢，亲爱的，但它并没有隐藏视频的顶层（视频标题，稍后观看和分享视频图标），也没有为我做任何事情。你有任何工作的例子吗？

    <link rel="stylesheet" href="https://vjs.zencdn.net/5.4.6/video-js.min.css">
    <video
      id="vid1"
      class="video-js vjs-default-skin"
      width="640" height="264"
      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>