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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater
火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo
-
-
シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11
CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて
-
-
プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100
HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ
-
-
ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」
ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ
-
-
いまさら聞けない無料のアイコンフォントの導入の仕方・使い方
アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし
-
-
ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21
CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ
-
-
美しいエフェクトが施されたCSSで作られたボタン12
css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を
-
-
アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお
-
-
UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」
UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl
-
-
美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」
ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自
