youtube埋め込み動画をレスポンシブ対応させる

案件で、youtube埋め込み動画をレスポンシブ対応させるというのをやったので、めも。

githubにソースはアップしている。
また、github pagesで公開したので、実際にどうなるかも確認いただけます。Github Pages

Source

.VideoWrapper {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

.video2,.video3 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.video2 > iframe,.video3 > iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

まず、サイズを100%表示しないものから。

---

VideoWrapperで、iframeをもつVideo2を囲います。
ここで、サイズを調整してください。
この時のサイズが動画のサイズになります。

iframeをもつVideo2は100%にしておき、iframeも100%にしておくとよいです。

100%表示

---

サイズ調整を行っているVideoWrapperを外せばOK

自分用のメモで説明が雑なので、わからないとこがあればコメントお願いします。