YouTubeの埋め込みサイズを自動調整させるCSS

YouTubeの埋め込みコードはiframeタグを使った固定サイズであるため、ウェブサイトに貼付けた際にプレイヤーがはみ出したり、逆に小さかったりしてレイアウトが崩れることがあります。ここでは、YouTube等の埋め込み動画のコードに含まれるiframe,その他の動画埋め込みコードで使われるobject, embedのサイズをCSSでレスポンシブにリサイズさせる方法を紹介します。

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="video-container">
    // ここにiframe等で始まる埋め込みコードを挿入
</div>

解説

video-containerに対して、padding-bottom: 56.25%;で動画サイズの16:9を実現し、padding-top: 30px;は動画プレイヤーのタイトル部分の高さになっています。これで動画の縦横比を固定したまま表示サイズに合わせて拡大縮小するボックスが出来上がります。

video-containerに内包される埋め込みタグ(iframe等)に対しては、video-containerの左上に配置させ、video-containerいっぱいに拡大させます。

PC表示

モバイル表示

レスポンシブレイアウトを利用しているサイトでは有用なCSSですね。

via: CSS: Elastic Videos