2015/03/23
激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」
YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できてしまうサービスをご紹介します。
余計な知識は一切不要。ただ、URLをコピーしてペーストするだけで、レスポンシブに対応した動画や地図をつくれてしまいます。
これまではCSSでの対応が必須でしたが、このサービスなら誰でも一瞬で対応できてしまいますね。
動画やGoogle Mapsをレスポンシブ化したいという方のご参考になれば幸いです。
YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化できてしまう「Embed Responsively」
Embed Responsivelyは、YouTube, Viemo, Dailymotion, Instagram, Vine, Getty Imagesといった動画系をはじめ、GoogleMapsの地図をコピーペーストだけでレスポンシブ化してしまうサービスです。
Embed Responsivelyの使い方
埋め込みたい動画のURLをコピーして、Embed Responsivelyにペーストするだけです。
例えば、以下の動画をレスポンシブ化して埋め込みたい場合は、URLを部分をコピーします。

Embed Responsivelyのページに行き、空欄にさきほどコピーしたURLをペースト、
「Embed」を押します。

すると、すぐに「Embed code:」が生成されるので、このコードをまるまるコピーして、表示させたいHTMLにペーストしましょう。

これまではCSSで対応していた
これまでYouTubeやGoogle Mapsをレスポンシブ化させたい場合は、以下のようなHTMLを記述して(埋め込みコードをdiv要素で囲む)、CSSで対応していました。
手間でもないですが、埋め込みコードを表示させて、HTMLを追加するわけですから、Embed Responsivelyに比べると、時間がかかります。
HTML
|
1 2 3 4 5 |
<div class="videoWrapper"> <!-- ↓ここに埋め込み用のコードをペースト --> <iframe src="httpss://player.vimeo.com/video/92978367?color=ffffff&title=0&byline=0&portrait=0" width="500" height="310" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <!-- ↑ここに埋め込み用のコードをペースト --> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } |
HTMLにスタイルを書くのがイヤ、という方は、これまでどおり、こちらの方法がいいかもしれませんね。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る
ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr
-
-
便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始
商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。
-
-
無料で使えるフラットデザインUIキット40
フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン
-
-
CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」
最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし
-
-
CSSグラデーションをとっても簡単に生成するツール「Gradientoo」
CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき
-
-
2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50
2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ
-
-
100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?
各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に
-
-
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ
-
-
レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17(ソースファイル付き)
レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではな
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?
