YouTubeやGoogleマップの埋め込みコードを簡単にレスポンシブ化してくれるWEBサービス「Embed Responsively」

YouTubeやGoogleマップの埋め込みコードを簡単にレスポンシブ化してくれるWEBサービス「Embed Responsively」

YouTubeやGoogleマップの埋め込みコードを簡単にレスポンシブ化してくれるWEBサービス「Embed Responsively」

Embed Responsively は、YouTube や Google マップの埋め込みコードをレスポンシブに対応してくれるツールです。

通常、これらの埋め込みコードは、固定サイズでレスポンシブデザインには対応していません。なので、CSS で調整しておかないとスマートフォンなどの小さな端末から見た場合、埋め込んだ動画や地図が画面をはみ出してしまいます。

Embed Responsively を使えば、スマートフォンで見た場合も埋め込んだ動画や地図を画面からはみ出さないように調整してくれるので、HTML や CSS の知識がなくても簡単にレスポンシブに対応してくれるというわけです。

スポンサードリンク

Embed Responsivelyの対応サービス

Embed Responsively は、これらの WEB サービスに対応しています。

  • YouTube
  • Vimeo
  • Dailymotion
  • Google Maps
  • Instagram
  • Vine
  • Generic iFrame

Embed Responsivelyの使い方

1. Embed Responsively にアクセスします。
2. 埋め込みコードの種類(サービス)を選択します。

埋め込みコードの種類を選択

3. YouTube などでコピーした埋めこみコードをフォームに入力して [Embed] をクリックします。

埋め込みコードの入力

4. プレビューと Embed code が表示されるので、Embed code をコピーしてサイトに貼り付けます。

Embed code

Embed Responsivelyを使って動画を埋めこんでみた

例えば、YouTube の動画を埋め込みたい場合は、動画の下に表示される [共有] タブをクリックして表示される URL を入力するだけで OK です。

YouTube動画の共有

Embed Responsively のフォームに入力すると、以下のようなコードに変換されるので、これをサイトに貼り付けます。


<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/hJYlXaFdp0o' frameborder='0' allowfullscreen></iframe></div>

貼り付けた動画がこちら↓

画面を縮めたり広げたりしてみてください。画面幅に合わせてサイズが変わっているのがわかりますか?

このように簡単にレスポンシブに対応したコードを埋め込むことができます。

あとがき

コードを埋め込む度に変換するのが面倒という方は、こちらの記事がおすすめです。埋め込みコードが iframe を使っているものにはすべて対応できます。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です