Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法

Youtube の埋め込みをレスポンシブ対応のページにそのまま入れようとしても、可変になってくれないという問題がでてきます。 レスポンシブ対応する方法について、毎回調べてしまっていたので、メモとしてエントリーしておきます。 Youtubeの埋め込みをレスポンシブ対応するCSS：条件付き2014年8月19日時点での埋め込みコードをレスポンシブ対応するには、以下のようにしておくだけです。 HTML

[sima-box]

Youtube レスポンシブ対応

[idr_zz]

デモアニメがあってわかりやすい。埋め込み動画の縦横比設定。 Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 - HAM MEDIA MEMO @h2hamさんから

[shotakikuchi]

“position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;”

[h-a-t-e-h-a-t-e-h-a-t-e-n-a]

ユーチューブの埋め込みをレスポンシブ対応にする

[kitokitoki]

youtube の iframe のコンテンツをレスポンシブにする css

[skyguild]

“ position: relative; width: 100%; padding-top: 56.25%; }”

[kadokurarara]

埋め込み動画の幅＆高さをレスポンシブにする。