*

BootstrapでGoogle map や Youtbeを貼る方法(iFrame)

公開日: : 最終更新日:2013/08/26 WEBDESIGN

よく探したらスグに見つかったのでメモしておきます。BootstrapでiFrameを綺麗に連動させる技です。

教えていただいたいのは「森薫の日記」様です。
http://d.hatena.ne.jp/kaorumori/20120803/1344069290

記事の中でも書かれていますが元ネタは
http://amobil.se/2011/11/responsive-embeds/

スクリーンショット 2013-08-25 23.20.27 2

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16/9 ratio */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="embed-container">
   <iframe
      src="http://www.youtube.com/embed/fzzjgBAaWZw"
      frameborder="0">
   </iframe>
</div>

試してみましたがとっても簡単にできました。感謝。


Sponsored Link


 
 

関連記事

Bootstrap の新しいバージョン3がお試し公開中

Mobile first な Bootstrap 3 RC1 が出てる。RC版なので本格稼働には向か

記事を読む

FL Studio サイドチェインでワウワウ言わせる(2)

FL Studio での Side chain の方法。今回はリミッター編です。第一回目のサイドチェ

記事を読む

Bootstrapでホームページを作ってみて気がついたメモ

簡単にレスポンシブデザインできる Bootstrap を使ってみて、気がついた点をメモしています。実

記事を読む

BootstrapでGoogle マップを貼る方法がわかりません

Bootstrap google map で検索すると、表示の乱れをCSSで修正するテクニックは見つ

記事を読む

素晴らしいブログが多いけど書籍に負けてるんじゃないかと

毎日のように素晴らしい記事を発見しています。特にブログの情報量にはホント驚かされます。しかし本を買う

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

GoPro HERO7 Black 〜 インフルの熱で異常行動か?

何故か記憶に無いのですが GoPro HERO7 Blackが届きまし

軽量レバーロック式三脚を物色する美少女

旅行用三脚として活躍しているのは GITZO GT1542T と KT

激安中華な Bluetooth 5.0 イヤホンを買ってみたけど便利ね

前から気になっていた Bluetooth 5.0 イヤホン。 耳

2018年に購入したもので最も良かったものはミニスライダー

あけまして おめでとうございます 2019年 第一発目にご紹介す

Final Cut Pro X 用の無料 Calloutsプラグイン13種&12種がいい感じ

すっかり Final Cut ネタが続きますが皆様いかがお過ごしでしょ

→もっと見る




  •  

PAGE TOP ↑