CSSだけでyoutubeを縦横比固定で埋め込む

レスポンシブでyoutubeの縦横比を固定したいことはよくあると思います。
今まではなにかとめんどくさいことをしないといけなかったのですが、CSSの新しいプロパティaspect-ratioの登場によってとても簡単に実装できるようになりました。

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

たったこれだけです。
幅は任意の幅で結構です。
幅に合わせてaspect-ratioが勝手に高さを変えてくれます。

aspect-ratioの使い所

このaspect-ratioですが、もちろんyoutubeの埋め込み以外でも便利に使うことができます。
例えば下のようなレイアウト。
aspect-ratioを使えば簡単に左右の要素の縦横比を固定してレスポンシブ対応できちゃいます。

DOG Pug snugged in a blanket

page

他にも丸が横並びになっていたりとかロゴが並んでいたりとか、色々な場面で使えると思います。

ちなみにaspect-ratioのブラウザ対応状況はこちらです。
https://caniuse.com/mdn-css_properties_aspect-ratio
IE以外の主要ブラウザであれば使うことができます。

CSSのプロパティaspect-ratioについてご紹介しました。
CSSはどんどん進化して便利なプロパティが増えています。
IE対応しなくていい案件が増えてきたのでそういった便利なCSSを活用して効率よくコーディングしていきたいですね。

フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・Webシステム制作会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

ホームページ制作のお問い合わせ、お見積り依頼、相談、質問は
お問い合わせフォームよりお願いいたします