Youtubeやvimeo、ニコニコ動画などの埋め込み動画をレスポンシブに対応させる！

Youtubeやvimeo、ニコニコ動画などの埋め込み動画をレスポンシブに対応させる方法です！

下記のスタイルシートを追加します！

    .video-container {
    position: relative;
    padding-bottom: 56.25%;/* 16:9 */
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    }

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

続いてHTMLは「video-container」のdivタグの中に貼り付け用のタグを挟むだけです。

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

≫ サンプルページこちら

iPhoneで見ると、ニコニコ動画がうまくいかないですが、変に横に飛び出たりしないので良しとするしか、今のところないみたいです。

SOURCE：Responsive Youtube Embed