Youtubeの埋め込みをレスポンシブ対応

レスポンシブに対応しているサイトで、youtubeの動画を埋め込む際、
スマートフォン用の表示なったときに、動画の画面表示比率を維持したまま縮小させる方法です。

.youtube-inner {
     position: relative;
     padding-bottom: 56.25%; 
     height: 0;
     overflow: hidden;
}
 
.youtube-inner iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

padding-bottom: 56.25%; は
高さの比率 ÷ 幅の比率 × 100でアスペクト比を算出することが可能です。

今回は16:9の比率なのでpadding-bottom: 56.25%; に設定しています。