レスポンシブのツールを以前紹介していますが、Webサイトでもレスポンシブが当たり前になってきています。
PCでスマホ、タブレット表示を確認しよう！レスポンシブチェックツール
ただサイト元はレスポンシブ表示したけど、Youtubeなどの動画やGoogle Mapsをサイトに埋め込んだもののレスポンシブ表示されず、埋め込み部分だけ大きく表示されて半分しか表示されていないってことありませんか。
WordPressのテーマ（テンプレート）によっては普通に埋め込んだものもレスポンシブ対応してくれるものもありますが、レスポンシブ表示されない場合にはこちらを使ってみてはいかがでしょうか。
今回はYoutubeやGoogle Mapsなどの埋め込みをレスポンシブ表示できるサービス「Embed Responsively」を紹介します。
但し、2016年6月22日以降に制作した新規サイトでGoogle Mapsを使用する場合、「APIキーが必須」になっていますのでご注意ください。
Embed Responsivelyの使い方
使い方は非常に簡単。
- Embed Responsivelyにアクセスします。
- 「①」でレスポンシブ表示して埋め込みたいサイトを選択します。
- レスポンシブ表示して埋め込みたいサイトのURLをコピーして「②」に貼り付ける。
- 「③」の「Embedボタン」をクリック
- 「④」に表示されたコードをコピーして自分の埋め込み表示させたいところに貼り付ける。
なんとこれだけ。すごい簡単にできます。
この「Embed Responsively」に対応しているサイトは、下記のになります。
- Youtube
- Vimeo
- Dailymotion
- Google Maps
- Instagram
- Vine
- Getty Images
- Generic iFrame
- Scribd (select ‘Autosize’)
- SoundCloud
- Storify
- Twitter
Youtube
Googleマップ
レスポンシブ関連記事
by 
