youtube埋め込み時のCSS設定

youtubeを埋め込んだときのレスポンシブの動画サイズがどう設定していいか分からなくて調べました。
動画なので16：9の比率のやつですね。

■HTML

<div id="wrapper">
    <iframe id="content" src="https://player.vimeo.com/video/98746172" frameborder="0"></iframe>
</div>

■CSS

#wrapper {
    position: relative;
    width: 100%;
}
#wrapper:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

■参考サイト　CSSだけでアスペクト比を固定するテク／Qiita

なるほど。「before」とか使うのですね。
すんごい昔の記事みたいですね。。2015年とか何してたかな。。