« スマホ対応画像のCSS | トップページ | WPでファビコンやホーム画面用アイコン »

2015年10月 2日 (金)

スマホ対応Youtubeとgooglemap

昨日はホームページをスマホ対応にしたら画像が半分になったり。ピクセルで表示したら。。スマホの横向きや縦向きもあるし。。と書いたけど。

それは治ったけど。
備忘録です。
googleマップとYouTube 
これもインラインフレームで表示しているので。横がはみでる。
グーグルマップのコード。
<div class="gmap">
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6567.186785018434!2d135.548483!3d34.614442!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000dec17b87685d%3A0x777c6ba882cdbd83!2z5pel5pysLCDjgJI1NDctMDAyNiDlpKfpmKrlupzlpKfpmKrluILlubPph47ljLrllpzpgKPopb_vvJXkuIHnm67vvJTiiJLvvJHvvJc!5e0!3m2!1sja!2sjp!4v1443742410710" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
スタイルシート
.gmap {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}
.gmap iframe, 
.gmap object, 
.gmap embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
ユーチューブのコード
<div class="video-container">
   <iframe width="550" height="413" src="//www.youtube-nocookie.com/embed/klmJV822pjg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
スタイルシート
.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.video-container iframe, 
.video-container object, 
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}


これでピッタリ表示される。。 うん!疲れるなあ!(笑)

|

« スマホ対応画像のCSS | トップページ | WPでファビコンやホーム画面用アイコン »

コメント

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: スマホ対応Youtubeとgooglemap:

« スマホ対応画像のCSS | トップページ | WPでファビコンやホーム画面用アイコン »