http://embedresponsively.com

スタイルシートも不要でGoogle MapやYoutube動画の埋め込みHTMLをレスポンシブ対応したHTMLコードに一発変換してくれる便利なWebサイト「embedresponsively.com」を覚書。

スタイルシートを使用してGoogle MapやYoutube動画などを記事に埋め込む際にレスポンシブ対応する方法は別の記事「FC2ブログカスタマイズ:【改訂版】YoutubeやGoogle Mapなどのiframeで埋め込んだ画像や動画をスマホ画面サイズに合わせてサイズを変更する(レスポンシブ)方法」で紹介しましたが、スタイルシートの設定など不要で埋め込みURLを貼り付けてボタンクリック一発でレスポンシブ対応化された埋め込みURLに変換してくれる便利なWebサイト「embedresponsively.com」を紹介。
スポンサードリンク


embedresponsively.comの概要

embedresponsively.com は、Youtube動画やGoogle Mapなどの埋め込みURLをサイトのテキストボックスに貼り付けてボタンをクリックすれば、貼り付けた埋め込みオブジェクトをレスポンシブ対応化させたコードを出力してくれます。

あとは出力されたコードを記事に貼り付ければスタイルシートなどの設定もする必要なく、埋め込んだオブジェクトがレスポンシブ対応化されて表示されるというとても便利なWebサイトです。

対応している埋め込みオブジェクト

対応している埋め込みオブジェクトは以下のとおりです。
  • YouTube
  • Vimeo
  • Dailymotion
  • Google Maps
  • Instagram
  • Vine
  • Getty Images
  • Generic iFrame

embedresponsively.com の使用方法

Google Mapを埋め込む場合を例にとって使用方法を説明します。

まずは埋め込みたいGoogle Mapの埋め込みURLをコピーします。

次にembedresponsively.com にアクセスします。

「Select a media source below:」の下に並んでいるボタンから[Google Map]をクリックします。
http://embedresponsively.com

「Google Maps iFrame Embed:」と書かれた下のテキストボックスにコピーしたGoogle Mapの埋め込みURLを貼り付けて[Embed]ボタンをクリックします。
embedresponsively.comで変換

実際に埋め込まれる地図が表示され、その下の「Embed code:」と書かれたテキストボックスにレスポンシブ対応化された埋め込みURLが表示されるので、あとはそれをコピーして記事に貼り付けるだけです。

変換前

変換前のGoogle Mapを埋め込んだ場合。

変換後

embedresponsively.com でレスポンシブ対応化したコードを貼り付けた場合。


埋め込みオブジェクトを簡単にレスポンシブ対応コードに変換してくれる「embedresponsively.com」まとめ

スタイルシートやHTMLに関する知識がくても簡単にGoogle MapやYoutube動画をレスポンシブ対応にしてくれる素晴らしいサイトです。

操作も簡単、基本コピー&ペーストだけです。

Googleもレスポンシブ対応されているかどうかをサイトの評価の一つとすることを公式に発表しているので意識したいところです。

スタイルシートとかHTMLなんてよくわからないという方もこういった便利なWebサービスを使用することで十分対応できると思うので是非活用してみてください。

スポンサードリンク

  

関連記事