knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

YouTubeのレスポンシブ対応

レスポンシブ対応したWEBサイトにおいてYouTubeを埋め込む際、ウィンドウ幅が縮んでもアスペクト比を固定しなければいけません。

その方法をご紹介します。

paddingを使う方法

<div id="wrapper">
    <iframe src="//www.youtube.com/embed/"></iframe>
</div>

このようにスタイルを指定します。

#wrapper{
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}
    iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

タネ明かしは、margin/paddingの高さを%指定した際の算出方法にあります。

width/heightを%指定した場合は、親要素のwidth/heightに対する数値が算出されます。

しかしmargin/paddingの高さ(つまりmargin-topやmargin-bottom)を%指定したとき、基準となるのは親要素の高さではなく だそうです。

求めるmargin(padding)の高さ ÷ 親要素のコンテンツ幅 × 100%

YouTubeに使用される動画のアスペクト比は、どうやら幅に対する56.25%が高さになるのだとか。

つまり、横幅に対する高さを、上記の式を用いて求めると

360 ÷ 640 × 100% = 56.25%

ということなのだそうです。

こちらで%指定についてより詳しく解説されているので、併せて読んでいただければより分かりやすいかと思います。

design-spice.com

同じアスペクト比の透過画像を使用する場合

上記よりもローテクですが、より間違いのない方法として、同じアスペクト比の透過画像を重ねるという方法があります。

まず、640 × 360 の透過画像を用意し、次のようにマークアップします。

<div id="iframe-wrapper">
    <img src="dummy.png" width="640" height="360" />
    <iframe src="//www.youtube.com/embed/"></iframe>
</div>
#wrapper{
    position: relative;    
}
    #wrapper img{
        position: static;
    }
    iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

原理は前回と同じですが、今回は高さをとるためにpaddingは指定せず、YouTubeと同じ大きさの画像をstaticに配置することで実現しています。

MQする場合はウィンドウ幅に合わせて画像を拡縮させます。

@media(max-width:640px){
    #wrapper img{
        width: auto;
        height: auto;
        max-width: 100%;
    }
}

このケースだと、640 × 360以外のアスペクト比にも対応できますし、計算する手間が省けます。

ただ文書構造がセマンティックであるかというと、疑問ではありますが……