画像の場合、background-image: url()
にbackground-size: cover
を指定することで、領域いっぱいに拡縮して画像が表示されるようにすることができます。
はじめに
目的
YouTubeやVimeoやDailymotionなどの動画をウェブサイトに埋め込む時には、<iframe>
で埋め込む方法が最も一般的かと思います。
<iframe>
で埋め込む動画を、background-size: cover
のように領域いっぱいに拡大・縮小させて、レスポンシブに対応させてみたいと思います。
前提条件
メディアクエリとJavaScriptを駆使した方法やjQueryを駆使した方法の記事がありますが、JavaScriptを一切使わず、シンプルなCSSだけで実現します。
なお、この記事で埋め込む動画のアスペクト比はすべて16:9
であることを想定してパラメータ値を書いています。
異なるアスペクト比の場合、適切にパラメータを計算し直してください。
ページの一部に埋め込む場合
<iframe>
を配置する要素の大きさを、親要素の大きさに合わせたい時の方法です。
もちろんレスポンシブにします。
TL;DR
このサイトを使って、埋め込みコードを作るのが正解です。
http://embedresponsively.com/
HTML & CSS
HTML
<div class="embed-container">
<iframe src="https://player.vimeo.com/video/66140585" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
CSS
.embed-container {
height: 0;
overflow: hidden;
max-width: 100%;
padding-bottom: 56.25%; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */
position: relative;
}
.embed-container iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
コードは http://embedresponsively.com/ のものをそのまま使っています。
CodePen
See the Pen Embedded Responsive Video by Kazuyuki Namba (@kulikala) on CodePen.
CSSのポイント
この方法の肝は、padding-bottom: 56.25%
です。
2009年のこの記事:Creating Intrinsic Ratios for Videoが有名です。
margin-top
、margin-bottom
、padding-top
、padding-bottom
を%
で指定すると、親要素のコンテンツ幅にパーセンテージが乗じられた値が計算される仕様とのこと。
詳しくは、レスポンシブWebデザインでハマりがちな%指定を参照ください。
背景動画にする場合
<iframe>
にposition: absolute
またはposition: fixed
を設定して背景動画にしたい時の方法です。
この場合、領域を埋めるように動画を拡大して表示するので、動画のはみ出た領域は見えなくなります。
HTML & CSS
HTML
<div class="embed-container">
<iframe src="https://player.vimeo.com/video/66140585" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
CSS
.embed-container {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed; /* fixed の場合。absolute でも同じ */
right: 0;
top: 0;
}
.embed-container iframe {
box-sizing: border-box;
height: 56.25vw; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh; /* 16:9 の幅なので 177.77% (= 16 ÷ 9) */
}
CodePen
See the Pen Covered-size Embedded Video by Kazuyuki Namba (@kulikala) on CodePen.
CSSのポイント
この方法の肝は、
-
height: 56.25vw
で画面領域の横幅vw
に対する割合で高さを決めている -
width: 177.77777778vh
で画面領域の高さvh
に対する割合で横幅を決めている -
min-height: 100%
で領域の高さいっぱいになるように設定している -
min-width: 100%
で領域の横幅いっぱいになるように設定している
この4つの指定を満たしつつアスペクト比を崩さないようブラウザが動画を描画してくれるので、領域をcoverするサイズになります。
後は、left: 50%
、top: 50%
でズラした後、transform: translate(-50%, -50%)
で真ん中に移動して、映像の中央が表示されるように調整しています。
この記事は、StackOverflowの記事 Scale and reposition iframe like background-size: cover を参考にしました。