[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック
動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。 動画をレスポンシブ対応で実装する現在主流となっているテクニックの解説と、もっとスマートに実装できるこれからのテクニックを紹介します。 Experiments in fixed aspect ratios 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 動画をレスポンシブ対応で、アスペクト比を維持したまま配置 もっとスマートに実装するためのスタディ 動画をレスポンシブ対応で、アスペクト比を維
![[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2dff0b306a31f4ce14295c1fa0d265a72accaeac/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017051901.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.canva.com/ja_jp/create/banners/youtube-banners/
