[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。 動画をレスポンシブ対応で実装する現在主流となっているテクニックの解説と、もっとスマートに実装できるこれからのテクニックを紹介します。 Experiments in fixed aspect ratios 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 動画をレスポンシブ対応で、アスペクト比を維持したまま配置 もっとスマートに実装するためのスタディ 動画をレスポンシブ対応で、アスペクト比を維

[idr_zz]

キーワード56.25%とはなんぞや。すなわち、16:9のアスペクト比。 [CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック

[bleu-bleut]

試してない

[localnavi]

gridを使う場合も電卓を叩かないといけないなら、特にメリットがないような気が。むしろ古いブラウザをキリステゴーメン＆縦横比に応じた設定を親要素と子要素にするのが余計に面倒なのでは？

[sho_yamane]

いつもpaddingでやってた。gridでやる勇気まだないな〜