画像の場合、background-image: url()にbackground-size: coverを指定することで、領域いっぱいに拡縮して画像が表示されるようにすることができます。 はじめに 目的 YouTubeやVimeoやDailymotionなどの動画をウェブサイトに埋め込む時には、<iframe>で埋め込む方法が最も一般的かと思います。 <iframe>で埋め込む動画を、background-size: coverのように領域いっぱいに拡大・縮小させて、レスポンシブに対応させてみたいと思います。 前提条件 メディアクエリとJavaScriptを駆使した方法やjQueryを駆使した方法の記事がありますが、JavaScriptを一切使わず、シンプルなCSSだけで実現します。 なお、この記事で埋め込む動画のアスペクト比はすべて16:9であることを想定してパラメータ値を書いています。
