埋め込みFacebookのビデオのためのCSS専用ソリューション

Question

私のサイト/ CMSには、YouTubeとfacebookのビデオが埋め込まれています。最近まで、facebookとyoutubeの両方の動画は16：9のサイズでした。私たちは、高さが0のdiv内にプレーヤーを埋め込み、56.25％の垂直パディングを行います。 - 多くのサイトが使用する標準的な "トリック"。

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

現在、Facebookでは、他のサイズの動画を投稿することもできます。それらを再生するには、一時的に高さ100％を使用し、FB PLAYER divでオーバーフローを隠していました。それはビデオ - 悪い解決策をクリップする。私たちはビデオURLしか持っていません。したがって、クリップが埋め込まれる前に寸法を知る方法はありません。

CSSのみのソリューションを試してみるのに数時間を費やしました。 Calcは十分ではないようです。どんなアイデアをどのように計算するかは、左の[と多分/ライト]と言うので、HDTVのように古い映画を再生するのと同じように、ワイドプレーヤーの16：9クリップではないものを表示できますか？

JavaScriptに頼らざるをえないように努力していますが、これまでこのCSSのみでは対応できませんでした。心に来ることの一つは、フレキシボックスですが、私はそれを使用する方法がわからないかもしれないので... :)

Answer 1

が掘りのビットをした、ありがとうございました。

1. http://oembed.com/にAPIがあります。このAPIは、ビデオのサイズを決定するためにバックエンドから使用できます。 facebook、youtube、その他多くのリソースがそれをサポートしています。可能であれば、バックエンドでoEmbedを使用して、長期的にはおそらく最高です。
2. 一度寸法、マージンを知っていれば：0自動;埋め込みを中心にするために使用することができます。

私のバックエンドは、この時点で寸法を取得しません。したがって、私の "デフォルト"のCSSクリップビデオ、そしてJavaScriptはパディングを調整し、オプションで幅を調整します。このソリューションはバックエンドにDjango/Backboneで行われたサイトを含む多くのアプリケーションで、バックエンドに[ちょうど比率]のサイズを提供することよりもはるかに劣っています。バックエンドで利用可能な比率で、準備が整ったHTMLを印刷することができました。反応や角度については、おそらくそれほど大きな違いはありません。

関連する主題では、facebookが埋め込みサイズをオーバーライドする方法が少し奇妙で、それらを調整するのが難しくなります。可変幅：高さの比に関連して、完全には解消されていないようです。