WordPressにyoutubeやgoogle mapをレスポンシブに埋め込んでみた

更新

youtubeやgoogle mapのiframe(インラインフレーム)を埋め込んだときに、何とかこれをレスポンシブに出来ないか、と長らく悩んでいた@web_shufuです。このほどようやくにして自分なりの正解を見つけたのでご報告。

普通に埋め込んでもレスポンシブにならない

私は、Wordpressのtwenty twelveテーマを、子テーマを利用してカスタマイズしています。

その環境では、iframeは全くレスポンシブになってくれません。

YouTube

YouTube動画を埋め込んだ場合、再生動画自体は縦横比を保って縮小されるので、上下に黒いスペースが出来て不恰好になります。

Google Map

Google Mapを埋め込んだ場合は横幅だけが変化。縦横比は保たれません。もうレスポンシブとは言えないレベルです。

レスポンシブに埋め込むためのコードを発行してくれるサイト発見

ところが最近こんな記事を拝見して一挙に悩みが解決。

なんと、embedresponsively.comというサイトに行けば、以下のメディアをレスポンシブに埋め込みコードを、1クリックで発行してくれるというではありませんか。

  • YouTube
  • Vimeo
  • Dailymotion
  • Google Maps
  • Instagram
  • Vine
  • Scribd (select ‘Autosize’)
  • SoundCloud
  • Storify
  • Twitter
  • Facebook
  • Generic iFrame

当然のように利用してみました。

レスポンシブなyoutubeの埋め込みコード

まずは、youtubeでお目当ての動画の共有コードをコピーします。
2013-10-20_2109

embedresponsively.comで、「YouTube」を選んで、先ほどコピーした共有コードをペーストし、「embed」をポチッ。
2013-10-20_2056_001

Embed code:で吐き出されたコード

<style>
.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto; 
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
</style>
<div class='embed-container'>
<iframe src='http://www.youtube.com/embed/YP415ypGHIs' frameborder='0' allowfullscreen></iframe>
</div>

これを貼り付けると見事にレスポンシブになります。

レスポンシブなGoogle Mapの埋め込みコード

まずはGoogle マップを適当に操作してお目当ての地図を出します。

チェーンのアイコンをクリックして「ウェブサイトへの地図埋め込み用 HTML コード」をコピー。
2013-10-20_2137

embedresponsively.comで、「Google Maps」を選んで、先ほどコピーした共有コードをペーストし、「embed」をポチッ。

Embed code:で吐き出されたコード

<style>
.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto; 
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
</style>
<div class='embed-container'>
<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E&aq=&sll=34.788507,136.124324&sspn=0.041236,0.055189&gl=jp&g=%E4%B8%89%E9%87%8D%E7%9C%8C%E4%BC%8A%E8%B3%80%E5%B8%82%E4%B8%89%E7%94%B0&brcurrent=3,0x600155c6088f3519:0xe9a4f662c07ad725,0&ie=UTF8&hq=&hnear=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85%EF%BC%88%E4%B8%89%E9%87%8D%EF%BC%89&ll=34.789043,136.123585&spn=0.082469,0.110378&t=m&z=13&output=embed&iwloc=B'>
</iframe></div>

これを貼り付けると見事にレスポンシブになります。

cssは使いまわすべし

このように、embedresponsively.comは便利なサイトですが、その仕組みは単純です。

iframe要素をdiv.embed-containerで囲み、.embed-containerにstyle要素でスタイルを与えています。

そしてstyle要素の内容は常に同じです。

こうなればこのcssは使い回すしかありません。多少クラス名を変更して早速style.cssに以下の内容を追記。

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

あとは、埋め込みコードを、下のようにdiv.embedmedia-containerで囲めば、レスポンシブな埋め込みが実現します。

<div class="embedmedia-container">youtubeやGooglemapの埋め込みコード</div>

入力補助ボタンで1クリ入力

ところで、これを毎回手動で入力するのは大変です。そこで、WordpressのHTMLエディタの入力補助ボタンをカスタマイズして、1クリックで入力できるようにします。

私は、function.phpをカスタマイズして「伸縮frame」ボタンを造りました。

その結果、

  1. youtubeやgoogle mapの埋め込みコードを貼り付ける
  2. 埋め込みコード全体を選択する
  3. 編集画面の「伸縮frame」ボタンをクリック

という簡単な工程で、youtubeやgoogle mapをレスポンシブに埋め込むことができるようになりました。

<div class="embedmedia-container"><iframe width="420" height="315" src="//www.youtube.com/embed/YP415ypGHIs" frameborder="0" allowfullscreen></iframe></div>

追記

本記事を書くにあたり、シンタロヲフレッシュさんはじめ先人には大変お世話になりました。

最初は「それなりにオリジナリティーのある記事が出来るのではないか」と思って書き始めたのですが、先人たちのパクリのような仕上がりになってしまいました。

でも、せっかく書いたので公開します。

WordPressにyoutubeやgoogle mapをレスポンシブに埋め込んでみた」への4件のフィードバック

  1. ピンバック: なんでもiframeレスポンシブ対応 | reilovewish

  2. ピンバック: 動画プレーヤーをレスポンシブにする簡単スニペット【Vimeo/Youtube】 : フタパパ

  3. 通りすがり

    おお!いろいろ調べましたがこれが一番イイです!
    ありがとうございます!!
    一言お礼が言いたくてコメントしました!

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です