[YouTube]埋め込み動画をレスポンシブさせる確実なやり方
どのブログを見ても、詰めが甘く参考にならないので書いておく。
コードの要点
- 埋め込みiframeをボックス要素で二重にネスト
- ブレークポイント768px(iPad縦表示)以上で、iframe直上ボックスのpaddingを解除
- ブレークポイント768px以上で、iframeの横幅と高さをピクセル固定・相対配置に
- height 0 / overflow hiddenなどは不要
1 2 3 4 5 6 7 8 9 10 11 | <article class="block-youtube"> <div class="inner-youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/7_B4Q2WcLTo?list=PLDus_yCXcTNFtfHBv-vfJOE_5hlT_YPsX?ecver=1" frameborder="0" allowfullscreen></iframe> <!-- /.inner-youtube --></div> <!-- /.block-youtube --></article> <article class="block-youtube"> <div class="inner-youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/97H9pmSRsbw?ecver=1" frameborder="0" allowfullscreen></iframe> <!-- /.inner-youtube --></div> <!-- /.block-youtube --></article> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .block-youtube { margin-bottom: 20px; } .inner-youtube { position: relative; padding-bottom: 56.25%; @include min(768) { padding-bottom: 0; } iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; @include min(768) { width: 560px; height: 315px; position: static; } } } |
コメントを投稿する