エラスティックビデオの実装

エラスティックビデオとは, YouTubeなどの埋め込み動画のサイズをレスポンシブに変化させる実装のことです.

実装はCSSを設定するだけでできるので比較的簡単にできます.

以下のようにHTMLがあるとします.

 <div class="embed-container"><iframe src="//www.youtube.com/embed/dCvuBz1FYWg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

CSSは以下のように設定します.

.embed-container {
    // for elastic video
    position:relative;
    padding-bottom:56.25%;  // 315 / 560
    height:0px;
    overflow:hidden;

    // for elastic video
    iframe,
    object,
    embed {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    }
}

ポイントは, iframe (, object, embed) のスタイルと, 埋め込み動画のコンテナとなる要素 (.embed-container) の padding-bottomです.
iframe (, object, embed) を上記のように設定することで, ブラウザの幅に応じて埋め込み動画のサイズも変化します.
ただし, これだけだと, 高さが変化しないので, コンテナとなる要素に, padding-bottom を (動画のheight / 動画のwidth) の比率で設定しておきます.