★YOUTUBEをレスポンシブで埋め込む★コピペでOK!

WEB制作、マーケティングに関する情報をお届けします。

★YOUTUBEをレスポンシブで埋め込む★コピペでOK!

2016.07.31

カテゴリ：WEB制作

タグ：

埋込

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

インデックス

1.YOUTUBEから埋め込みコードを抽出
2.HTMLとCSSを貼付ける

1.YOUTUBEから埋め込みコードを抽出

埋め込みたい動画を開き動画下の共有→埋め込みコード→コードをコピーします。

2.HTMLとCSSを貼付ける

下記のdivタグ内にYOUTUBEでコピーしたコードを貼付けます。

HTML

<div class="youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WBrCZgHiGx" frameborder="0" allowfullscreen></iframe>
</div>

</div>

CSS

.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%;
}