YouTube などの動画を iframe で埋め込こんだ時に CSS でレスポンシブにする方法

Movie responsive css

このブログはレスポンシブデザインのテンプレートを使っているのですが。YouTube の動画を埋め込んだ時に、横幅の狭いスマートフォンで表示した時、縦と横の比率がおかしくなっているのが前から気になっていたので、埋め込み動画もレスポンシブに対応してみました。

なんと。CSS で調整するだけで、埋め込み動画もレスポンシブに対応することができました。

YouTubeやVimeoなどの埋め込み動画をレスポンシブ対応させる方法 | NxWorld

こちらを参考にさせて頂きました。

CSS: Elastic Videos

でこちらが元ネタ(?)なのかな。

元ネタの方からソースを頂きました。

レスポンシブにする HTML と CSS

CSS

「margin-bottom」は自分で追加しました。下に続く項目がピッタリと動画にくっついてしまったので。

HTML

これで埋め込み動画を美しく表示できました。

Johnny Marr – New Town Velocity

動画の最大幅をを指定する

また、動画の最大幅を指定したいときは、以下を追加すればよいそうです。

CSS HTML

この例だと最大幅が 600px になっています。先ほどの HTML をさらに wrapper で包む感じですね。

まとめ

これで明日、セカンド・アルバムをリリースするジョニー・マーの動画をかっこ良く埋め込むことができます。いつでも動画を公開して下さい。マー師匠。

スポンサーリンク

ABOUTこの記事をかいた人

IT は、Apple、Google が特に好き。 音楽は、The Stone Roses、Johnny Marr が特に好き。 好きな飲み物は、ビール。 好きな食べ物は、ラーメン。 以上です。