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年とか何してたかな。。