YouTubeやGoogle Mapのiframeだけを埋め込んでレスポンシブ対応させる方法


Webサイト（ホームページ）やブログでYouTubeやGoogle Mapを埋め込むことがありますが、PCだけでなくタブレット端末、スマートフォンといったいろんなデバイスできれいに表示させるには手間がかかります。

埋め込みにはiframeを使うと思いますが、YouTubeやGoogle Mapのシェアからただ埋め込むだけではきれいに観やすく表示させることはできません。
埋め込むだけでレスポンシブ対応してくれると嬉しいですよね。

今回はそんな手間がかかりそうなYouTubeやGoogle Mapの埋め込みを、iframeだけ埋め込んでレスポンシブ対応させる方法をご紹介します。


レスポンシブ対応CSSを書く


まずは、レスポンシブ対応のためのCSSを書きます。
Google Map用とYouTube用と2つ。

YouTube用

.yt-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Google Map用

.gmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



内容としては、埋め込んだiframeをYouTube用、Google Map用のクラスの付いたブロック要素のdivで囲ってあげると効くスタイルを書きました。

これで、例えばYouTubeだったら埋め込みのiframeを「<div class=”yt-wrapper”></div>」で囲ってあげればレスポンシブに対応することができます。

HTML

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



まぁここまでは普通なのですが、WordPressなどのCMSを利用していてHTMLとかタグとかよくわからない人がブログやニュース、お知らせの投稿などで地図を載せたい、動画を載せたいとなった時、その度にクラス付きのdivを記述しなければなりません。
Web製作者の場合は知識があるので大丈夫ですが。

そんな時は、クラス付きのdivを動的に埋め込んだiframeを囲ってあげるようにしてあげればいいですね。

JavaScriptやPHPでいけるのですが、ちょっと複雑なコードになるのでjQueryでシンプルにやっちゃいます。


jQueryでクラス付きのdivの親要素を追加


jQueryで埋め込んだiframeにクラス付きのdivの親要素を追加します。
マッチしている要素をwrapメソッドを使って、.wrap()に囲う要素を指定します。
YouTubeだとドメインの「youtube」、GoogleMapだとディレクトリの「maps」が共通部分なので、その要素がマッチしているかで判断します。

JS

$(function() {
  var yt = $('<div class="yt-wrapper"></div>');
  var gmap = $('<div class="gmap"></div>');
  $('iframe[src*=youtube]').wrap(yt);
  $('iframe[src*=maps]').wrap(gmap);
});



YouTubeの場合、「iframe[src*=youtube]」でsrcに「youtube」という文字列がマッチした要素に対して.wrap()でクラス付きのdivで囲います。

上記では変数を使ってますが、下記のように別に使わなくても大丈夫です。

JS

$(function() {
  $('iframe[src*=youtube]').wrap('<div class="yt-wrapper" />');
  $('iframe[src*=maps]').wrap('<div class="gmap" />');
});



.wrap()内の要素の書き方は、divの閉じタグをしっかり書かなくても、上記のように省略することもできます。
こっちのほうがシンプルですね。

お好きな方の書き方を。

これで埋め込んだiframeをYouTubeやGoogle Map用に必要なdivで囲ってあげることができました。

Web製作者は、お客さんがHTMLの知識がなくても自動的にクラス付きのdivがついてレスポンシブに対応するようにしてあげれますね。