レスポンシブに対応しているサイトで、youtubeの動画を埋め込む際、
スマートフォン用の表示なったときに、動画の画面表示比率を維持したまま縮小させる方法です。
1 2 3 |
<div class="youtube-inner"> <iframe width="640" height="360" src="https://www.youtube.com/embed/vI4LHl4yFuo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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%; に設定しています。
コメント