*

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

簡単にSONYカメラとURSA mini 4.6Kの色を合わせる LUTS

少し色々試してみて、とっても気に入ったので改めてご紹介してみます。

MOZA AirCrossのPIDを調整してみる美少女

最初に MOZA AirCrossをPCに繋いで調整する手順を簡単に紹

JJC 液晶シェード(液晶フード) SONY α6000 α6300 α6500 用を試す!

おじさんが液晶フードを試してみたけど...というお話をしまーす!

MOZA AirCross 3軸手持ちジンバルを買ってみた【動画編】

Amazon様で「4,990円OFFのクーポンが適用されています」とい

無料の動画素材サイトをメモ

自分用の動画素材サイトをメモ。 ライセンス等は当然ですが自己責任。良

→もっと見る




  •  

PAGE TOP ↑