使用超文本标记语言/CSS/JavaScript隐藏YouTube视频控件（标题、稍后观看、共享）

Question

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

<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参数。现在该参数已被弃用，请参考(https://developers . Google . com/YouTube/player _ parameters # showinfo)

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

运筹学

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

Answer 1

如果您使用的是Youtube Iframe。它不起作用，因为Youtube已弃用该参数来控制标题，共享和稍后观看选项。

解决这个问题的其他方法：尝试其他视频播放器，比如videojs，甚至vimeo这样的服务提供视频播放器的托管。

Answer 2

当我们在HTML中< code >嵌入视频时，这是一个非常常见的问题，所以我们用一个简单的技巧来解决这个问题，我们将创建一个< code>iframe的父(包装)div，并添加< code > padding-bottom:56.25% 。这就是神奇之处。在CSS中，padding-bottom属性可以接收一个百分比，这是使我们的iframe保持正确比率的原因。通过使用百分比。

css lang-css prettyprint-override">.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;
}

Answer 3

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

<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>