嵌入式Facebook视频的CSS-only解决方案

Question

我的网站/ 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，但也许是因为我不知道如何使用它......：）

谢谢

Answer 1

进行了一些挖掘。

1. 有一个API-oEmbed at http://oembed.com/，可以从后端使用它来确定视频尺寸。 facebook，youtube和许多其他资源都支持它。长期来看，如果可能的话，在后端使用oEmbed可能是最好的。
2. 一旦我们知道尺寸，保证金：0自动;可以用来嵌入嵌入物。

此时，我的后端不会检索尺寸。因此，我的“默认”css剪辑视频，然后JavaScript调整填充，并可选择宽度。对于许多应用程序，包括我的网站使用Django / Backbone完成，这个解决方案显然不如后端提供维度[只是比例]。通过后端可用的比率，我们可以打印准备好的HTML。对于反应或角度，它可能没有那么大的差别。

在相关主题上，有点奇怪facebook如何覆盖嵌入大小，使调整更难。似乎没有完全解决，结合可变宽度：高度比。