YouTubeの動画やGoogleMapをサイトに埋め込む方法【レスポンシブ対応】

1,846view

YouTubeの動画やGoogleMapをサイトに埋め込む方法【レスポンシブ対応】

YouTubeの動画やGoogleMapの地図を、自分のブログやサイトに埋め込みたい時の方法を解説します。

CONTENTS

YouTubeの場合

YouTubeの動画の埋め込みコードを取得する

YouTubeの公式サイトから埋め込みたい動画の[共有]ボタンをクリックして、以下の画面のifameタグの部分をコピーします。

取得したコードを表示したい箇所にペーストします。

<iframe width="560" height="315" src="https://www.youtube.com/embed/nP7JtxdxdwI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このままでも表示は可能ですが、レスポンシブに対応していないのでCSSを使って調整します。
このとき「iframe-container」というクラス名を付けたdivで括ります。

<div class="iframe-container">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/nP7JtxdxdwI" frameborder="0" allow="accelerometer; 
 autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSSでレスポンシブ対応

レスポンシブ対応するためCSSに以下を記述します。

.iframe-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.iframe-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

実際に埋め込んでみると以下のように表示されます。

ウィンドウサイズを変更してもレスポンシブになっていることが確認できるかと思います。
表示する高さを調整したい場合はCSSの.iframe-containerのpadding-bottomの数値を変更すると高さが調整できます。

GoogleMapの場合

埋め込みたい地図の[共有]から[地図を埋め込む]をクリックして、
以下の画面のifameタグの部分をコピーします。

あとは、YouTube同様に取得したコードを「iframe-container」のクラス名を付けたdivで括ります。

<div class="iframe-container">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d118930.09546285485!2d-157.86928454696044!3d21.328179134360173!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c00183b8cc3464d%3A0x4b28f55ff3a7976c!2z44Ki44Oh44Oq44Kr5ZCI6KGG5Zu9IOODj-ODr-OCpOW3niDjg5vjg47jg6vjg6s!5e0!3m2!1sja!2sjp!4v1587909426666!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

実際に埋め込んでみると以下のように表示されます。

簡単で実用的な方法なのでWebサイトを制作する際にご活用ください。

人気記事

この記事をシェアする