私のサイト/ CMSには、YouTubeとfacebookのビデオが埋め込まれています。最近まで、facebookとyoutubeの両方の動画は16:9のサイズでした。私たちは、高さが0のdiv内にプレーヤーを埋め込み、56.25%の垂直パディングを行います。 - 多くのサイトが使用する標準的な "トリック"。埋め込みFacebookのビデオのためのCSS専用ソリューション
.video__embed {
height: 0;
padding-top: 56.25%;
position: relative;
}
現在、Facebookでは、他のサイズの動画を投稿することもできます。それらを再生するには、一時的に高さ100%を使用し、FB PLAYER divでオーバーフローを隠していました。それはビデオ - 悪い解決策をクリップする。私たちはビデオURLしか持っていません。したがって、クリップが埋め込まれる前に寸法を知る方法はありません。
CSSのみのソリューションを試してみるのに数時間を費やしました。 Calcは十分ではないようです。どんなアイデアをどのように計算するかは、左の[と多分/ライト]と言うので、HDTVのように古い映画を再生するのと同じように、ワイドプレーヤーの16:9クリップではないものを表示できますか?
JavaScriptに頼らざるをえないように努力していますが、これまでこのCSSのみでは対応できませんでした。心に来ることの一つは、フレキシボックスですが、私はそれを使用する方法がわからないかもしれないので... :)
実際のビデオの縦横比がわからない場合、calcやflexboxはどのように役立ちますか?要素の次元を知らない値にも適用することはできません。 – CBroe