youtube動画をレスポンシブで表示させる

youtube楽しいですよね。
サイトに動画をうめこみたい場合、youtubeにアップして、
youtubeの画面から埋込コードを取得して埋め込むのが簡単です。

しかし、取得したコードをそのまま埋め込むと、、、
固定幅になってしまって、レスポンシブ対応してくれません。。
そういった場合は、埋込コードをdivでくくって、heightを0にしておいてpadding-topかbottomを%で指定すると
グッドな感じでレスポンシブしてくれます^^
paddingを%で指定する場合、もとになる数字はその要素の横幅になります。
なので横幅が伸び縮みすると、paddingも自動的に伸び縮みしてくれるっていう仕組み。

具体的にコードを書いてみます。

これって最近よくある、アイキャッチをhoverでズームインさせたりするやつ、
ブロックをwidth、heightの値を指定しなきゃいけなかったりするときとか、
横幅は%指定すればなんとでもレスポンシブできるけど、縦横比を維持しながらレスポンシブさせたいときは
これがとっても役立ちます^^

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

2 thoughts on “youtube動画をレスポンシブで表示させる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


top