*

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でホームページを作ってみて気がついたメモ

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑