
★YOUTUBEをレスポンシブで埋め込む★コピペでOK!
2016.07.31
カテゴリ:WEB制作
タグ:

YOUTUBE動画の埋込コードはそのまま埋め込みしても固定幅になっておりスマホなどでの観覧の際はサイトの仕様によって画面をオーバーしてしまったりとユーザビリティが悪いです。今回はコピペで出来るレスポンシブのコードを紹介します。
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のレスポンシブ対応でした。