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

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

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

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

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

YouTube

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

Google Map

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

“>

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

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

レスポンシブ対応。ブログにGoogle Mapsで作成した地図（マイプレイス）を埋め込む方法。

youtubeやinstagramの埋め込みコードをレスポンシブ化させてくれるwebサービス「embedresponsively.com」 * prasm

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

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

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

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

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

embedresponsively.comで、「YouTube」を選んで、先ほどコピーした共有コードをペーストし、「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 src='http://www.youtube.com/embed/YP415ypGHIs' frameborder='0' allowfullscreen></iframe>
</div>

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

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

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

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

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クリックで入力できるようにします。

WordPress投稿画面のボタンの使い方、ボタンを追加・削除してカスタマイズする方法

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

その結果、

youtubeやgoogle mapの埋め込みコードを貼り付ける
埋め込みコード全体を選択する
編集画面の「伸縮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で記事内に貼り付けたビデオの幅の調節に苦しんでいるなら取り入れるべきCSS技 * prasm

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

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