この情報は、ocadwebさんのブログで知りました。
レスポンシブのツールを以前紹介していたそうですが、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
- Vine
- Getty Images
- Generic iFrame
- Scribd (select ‘Autosize’)
- SoundCloud
- Storify
またね。
