youtubeの動画をブログなどに貼り付けるとき、スマホの場合によっては、レスポンシブ化しなければならないこともあります。
そういうときには、縦の長さを含めて大きさが変わるようにするcssの設定が必要になります.
■html
1 2 3 4 5 6 |
<div class="youtube"> <iframe src="https://www.youtube.com/" frameborder="0" allowfullscreen> </iframe> </div> |
■css
1 2 3 4 5 6 7 8 9 10 11 12 |
.youtube{ position:relative; width:100%; padding-top:56.25%; } .youtube iframe{ position:absolute; top:0; right:0; width:100%; height:100%; } |
このcssであればレスポンシブに対応された状態になります。
コメント