我的网站/ CMS嵌入了youtube和facebook视频-[我们制作并在其中发布]，以及书面帖子。直到最近，facebook和youtube视频都具有16：9的尺寸。我们将播放器嵌入高度为零的div内，并进行56.25％的垂直填充；-许多站点使用的标准“技巧”。
.video__embed {
height: 0;
padding-top: 56.25%;
position: relative;
}
现在，facebook还允许发布其他尺寸的视频。为了玩这些游戏，我暂时使用了100％的高度，并在FB PLAYER div上隐藏了溢出。它剪辑视频-不好的解决方案。我们只有视频网址。因此，在嵌入剪辑之前无法知道尺寸。
花了几个小时尝试提出仅CSS的解决方案。Calc似乎还不够。有什么想法可以计算出说padding-left（也许是/ -right），这样我就可以在宽屏播放器中呈现那些不是16：9的剪辑了，就像HDTV播放旧电影一样？
尽力避免不得不求助于JavaScript，但是直到现在还没有办法解决这种仅CSS的问题。想到的一件事是flexbox，但这也许是因为我不知道该怎么用... :)
谢谢
做了一些挖掘。
我的后端目前不检索尺寸。因此，我的“默认” css剪辑了视频，然后JavaScript调整了填充和宽度（可选）。对于许多应用程序，包括我的使用Django / Backbone完成的网站，此解决方案显然不如让后端提供尺寸（正好是比率）。在后端有比率时，我们可以打印就绪的HTML。对于反作用或角度作用，它可能并没有太大的区别。
在相关主题上，Facebook如何覆盖嵌入大小，这使得调整难度变得有些奇怪，这有点奇怪。与可变的width：height比率结合使用时，似乎还没有完全解决。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句