★YOUTUBEをレスポンシブで埋め込む★コピペでOK!
2016.07.31
カテゴリ：WEB制作
タグ：
1.YOUTUBEから埋め込みコードを抽出
埋め込みたい動画を開き動画下の共有→埋め込みコード→コードをコピーします。
2.HTMLとCSSを貼付ける
下記のdivタグ内にYOUTUBEでコピーしたコードを貼付けます。
HTML
|
1 2 3 |
<div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/WBrCZgHiGx" frameborder="0" allowfullscreen></iframe> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
コレだけで完了です。
以上、コピペで出来るYOUTUBEのレスポンシブ対応でした。
