« Bluetoothマウスのマウスを購入と接続 | トップページ | エクセルの文字化け »

2017年3月21日 (火)

レスポンシブサイトのYoutubeとGoogleMapコード

ホームページで表示するときにPCやスマホ、タブレットで見る人も多い。。最近はスマホの方が回数は多い。
それを画面100%に表示させる。拡大縮小を自動でさせるコードとCSS。
関係ない人にはどうでもいいことなんですが。、
Youtubeコード
本文<div class="youtube2">  〜埋め込みコード〜</div>
CSS
.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
GoogleMapコード
本文<div class="ggmap"> 〜埋め込みコード〜</div>
CSS
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

|

« Bluetoothマウスのマウスを購入と接続 | トップページ | エクセルの文字化け »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/120043/65045923

この記事へのトラックバック一覧です: レスポンシブサイトのYoutubeとGoogleMapコード:

« Bluetoothマウスのマウスを購入と接続 | トップページ | エクセルの文字化け »