WordPressやWebデザインなどに役立つ情報をご紹介

簡単!レスポンシブデザインでYoutubeやGoogle Mapsを埋め込む便利なツール

Ad

レスポンシブのツールを以前紹介していますが、Webサイトでもレスポンシブが当たり前になってきています。

PCでスマホ、タブレット表示を確認しよう!レスポンシブチェックツール

ただサイト元はレスポンシブ表示したけど、Youtubeなどの動画やGoogle Mapsをサイトに埋め込んだもののレスポンシブ表示されず、埋め込み部分だけ大きく表示されて半分しか表示されていないってことありませんか。

WordPressのテーマ(テンプレート)によっては普通に埋め込んだものもレスポンシブ対応してくれるものもありますが、レスポンシブ表示されない場合にはこちらを使ってみてはいかがでしょうか。

今回はYoutubeやGoogle Mapsなどの埋め込みをレスポンシブ表示できるサービス「Embed Responsively」を紹介します。

但し、2016年6月22日以降に制作した新規サイトでGoogle Mapsを使用する場合、「APIキーが必須」になっていますのでご注意ください。

Embed Responsivelyの使い方

YoutubeやGoogle Mapsをレスポンシブ化してサイトに埋め込む「Embed Responsively」

使い方は非常に簡単。

  1. Embed Responsivelyにアクセスします。
  2. 「①」でレスポンシブ表示して埋め込みたいサイトを選択します。
  3. レスポンシブ表示して埋め込みたいサイトのURLをコピーして「②」に貼り付ける。
  4. 「③」の「Embedボタン」をクリック
  5. 「④」に表示されたコードをコピーして自分の埋め込み表示させたいところに貼り付ける。

なんとこれだけ。すごい簡単にできます。

この「Embed Responsively」に対応しているサイトは、下記のになります。

  • Youtube
  • Vimeo
  • Dailymotion
  • Google Maps
  • Instagram
  • Vine
  • Getty Images
  • Generic iFrame
  • Scribd (select ‘Autosize’)
  • SoundCloud
  • Storify
  • Twitter

Youtube

Googleマップ


レスポンシブ関連記事

Ad
by
IT企業に勤務を経てフリーに。Web制作やWebサービスに関連した役立つ情報を紹介していきます。わかりやすい記事を書くことを心がけています。Apple,Wintersports(Ski,Snowboard),海外旅行が好き。