仅适用于嵌入式facebook视频的纯CSS解决方案

我的网站/ CMS嵌入了YouTube和Facebook视频 - [我们制作并发布那些视频]以及书面帖子。直到最近，facebook和youtube视频都有16：9的尺寸。我们会在高度为零的div内嵌入一个球员，并做垂直填充56.25％; - 许多网站使用的标准“技巧”。仅适用于嵌入式facebook视频的纯CSS解决方案

.video__embed { 
    height: 0; 
    padding-top: 56.25%; 
    position: relative; 
}

现在，facebook还允许发布其他维度的视频。为了播放这些，我暂时使用了高度100％并隐藏了FB PLAYER div上的溢出。它剪辑视频 - 糟糕的解决方案。我们只有视频网址。因此，在剪辑嵌入之前无法知道尺寸。

花了几个小时尝试使用纯CSS解决方案。 Calc似乎不够。任何想法如何计算填充左侧[也许/右]，所以我可以在宽播放器内呈现那些不是16：9剪辑，就像HDTV播放老电影一样？

努力避免不得不求助于JavaScript，但直到现在还无法用这种仅使用CSS的方法来实现。我想到的一件事是Flexbox的，但也许是因为我不知道如何使用... :)

谢谢

来源

2016-09-30 Moshe Shmukler

如果您不知道实际的视频宽高比，calc或flexbox会如何帮助您？您无法将元素维度调整为您不知道的值。 – CBroe

做了一些挖的。

有一个API - oEmbed在http://oembed.com/，它可以在后端使用，以确定视频尺寸。 Facebook，YouTube和许多其他资源支持它。长期来说，如果可能的话，在后端使用oEmbed可能是最好的。
一旦我们知道尺寸，margin：0 auto;可以用来居中嵌入。

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

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

来源

2016-10-02 08:33:43

仅适用于嵌入式facebook视频的纯CSS解决方案

回答

相关问题