YouTubeの埋め込みをレスポンシブ化する方法
YouTubeの<iframe>タグで埋め込みをすると、レスポンシブ対応になっていないため、スマホで閲覧した際にサイトからはみ出してしまいます。
下記のコードをhtmlファイルとcssファイルにコピペすればYouTubeの埋め込みもレスポンシブ対応になります。
下記コードをコピペで実装
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% !important; height: 100% !important; } |
html
|
1 2 3 |
<div class="youtube"> <!--ここにiframeの埋め込みコード--> </div> |
工夫して使用すればYouTube以外の埋め込みコードにも使用出来ます。レスポンシブ対応させることは今や常識になってきてますので是非ご活用ください。