Youtubeの埋め込みをレスポンシブ対応するCSS
youtube動画の埋め込みを、レスポンシブ対応させる場合のCSSです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/**--------------------------------------------------------------- youtubeレスポンシブ対応 ---------------------------------------------------------------**/ .youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } |
埋め込むyoutubeのコードは、
|
1 2 3 |
<div class="youtube"> </div> |
の間に挿入。