用于嵌入式 Facebook 视频的纯 CSS 解决方案答案

【问题标题】：CSS-only solution for embedded facebook videos用于嵌入式 Facebook 视频的纯 CSS 解决方案
【发布时间】：2016-09-30 07:38:06
【问题描述】：

我的网站/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 似乎还不够。任何想法如何计算说填充左[和可能/右]，所以我可以在宽播放器中呈现那些不是 16:9 的剪辑，就像 HDTV 播放老电影一样？

努力避免不得不求助于 JavaScript，但直到现在才想出一种方法来处理这种纯 CSS。想到的一件事是 flexbox，但可能是因为我不知道如何使用它... :)

谢谢

【问题讨论】：

如果您不知道实际的视频宽高比，calc 或 flexbox 将如何帮助您？您无法将元素尺寸调整为您甚至不知道的值。

标签： html facebook css video

【解决方案1】：

挖了一点。

http://oembed.com/ 有一个 API - oEmbed，可用于从后端确定视频尺寸。 facebook、youtube 和许多其他资源都支持它。从长远来看，尽可能在后端使用 oEmbed 可能是最好的。
一旦我们知道尺寸，margin: 0 auto;可用于使嵌入居中。

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

在相关主题上，facebook 如何覆盖嵌入尺寸有点奇怪，这使得调整这些尺寸变得更加困难。结合可变的宽高比，似乎没有完全解决。

【讨论】：