我想在我的网站中嵌入一个非正方形的 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 片段中不起作用，所以这是一个 jsbin 链接: https://jsbin.com/felosadewi/edit?html,output
最佳答案
我已经设法为您的节目找到一个纯 CSS 解决方案，将视频剪辑成适合 1:1 的盒子。
https://jsbin.com/woralocoti/edit?html,output
我没有通过使用 padding-bottom:56%; (16/9) 将视频放在固定宽高比框 (16:9) 中。
然后使用 overflow:hidden;
关于html - 将非方形 Youtube 视频嵌入为方形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52495603/