iframeをレスポンシブ対応させる方法

YouTubeの動画を埋め込みたいときってたまにありますよね。
でも、それがレスポンシブ案件だったりすると単純にiframeを入れるだけだとちょっとだけレイアウトが崩れちゃいます。例えば以下の感じ。

ソースは以下。

sample01.html

<div class="movieWraper">
            <div class="iframeWrap">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/PcUVtC-f8RY" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>

sample01.css

.movieWraper {
    width: 100%;
}

.iframeWrap{
    width: 100%;
}

幅１００％にしても高さが固定されてて横長になっちゃいます。

解決法

これの解決法としては、
・iframeにposition:absoluteを指定
・.iframeWrapは高さをなくしてpaddingで高さを決める
と良いです。
ソースは以下。(htmlは変更なし)

sample02.css

.movieWraper {
    position: relative
    width: calc(100% - 10px);
    margin: 0 auto;
}

.iframeWrap{
    height: 0;
    padding-bottom: 62.5%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
}

.iframeWrapで指定したwidthとpadding-bottom(padding-topでも良い)はそのときに応じた良い感じのパラメータ設定してください。

2016/11/18 追記

コメントいただいた通り、padding-bottom(padding-top)は動画の比率利用して9 / 16 = 0.5625 → 56.25(%)を利用すると丁度良さそうですね。
ご指摘ありがとうございました。

まとめ

決して難しいことはしてないですが、忘れっぽくて細かいやり方忘れてたのでメモでした。
以上。