将非方形 Youtube 视频嵌入为方形答案

【问题标题】：Embed non-square Youtube video as square将非方形 Youtube 视频嵌入为方形
【发布时间】：2019-02-28 22:13:03
【问题描述】：

我想在我的网站中嵌入一个非正方形的 Youtube 视频作为正方形。

在 iframe 上设置 width="" 和 height="" 可以使播放器保持正方形。但是，里面的视频不是方形的：顶部和底部都有黑条。

有没有办法让播放器“放大”并将视频播放为正方形？

<iframe width="200" height="200" src="https://www.youtube.com/embed/8nt3edWLgIg?autoplay=0&playsinline=1&showinfo=0&modestbranding=1" allow="encrypted-media"></iframe>

PS：在 stackoverflow sn-ps 中嵌入似乎不起作用，所以这里有一个 jsbin 链接： https://jsbin.com/felosadewi/edit?html,output

【问题讨论】：

标签： html iframe youtube embedding

【解决方案1】：

我已经设法为您的节目提供了一个纯 css 解决方案，该视频被剪辑以适合 1:1 的盒子。

https://jsbin.com/woralocoti/edit?html,output

我没有通过使用padding-bottom:56%; (16/9) 将视频放在固定宽高比框 (16:9) 中。

然后用overflow:hidden;将该框置于1:1框的中心

【讨论】：