モバイルで表示したとき、埋め込みInstagramの縦幅が狭くなる

PR 2014/9/6

このトピックには4件の返信、2人の参加者があり、最後にTakeshi Miyataにより11年、 5ヶ月前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2014年9月1日 11:19 AM #1184
  
  Takeshi Miyata
  ゲスト
  
  もう1つご報告です。下記記事で発生している事象ですが、Instagramを標準の埋め込みHTML貼り付けをしたとき、通常のブラウザでは問題なく表示されますが、iPhoneなどのときに縦幅が狭くなります。
  
  http://dpost.jp/2014/07/31/wp-20464/
  
  埋め込んでいるHTMLは下記のものです。
  
  <iframe src="//instagram.com/p/rC8yLunT6i/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
  
  自分でcssをいじろうとしたのですが、ちょっとうまくいかず…。
  こちらも事象の報告でした。どうぞよろしくお願いいたします。
- 2014年9月1日 5:55 PM #1195
  わいひら
  キーマスター
  不具合報告ありがとうございます！
  これは、mobile.cssの以下の部分を削除すると良いかもしれません。
```
/************************************
** video
************************************/
/*動画の最大幅を指定する*/
.video-container{
  max-width:640px;
}
 
/*動画の大きさを調整*/
.video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
 
/*動画を囲んでいるdiv目一杯に広げる*/
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
```
  これは、Youtubeなどをモバイルの幅にレスポンシブ表示されるように入れているのですが、YouTubeのアスペクト比で出てしまいます。
  ただ変更すると、正常に表示されますが、モバイルの幅をはみ出して表示されるかもしれません。
  ここら辺も今のところどうしようもないかもしれません。
  Instagramの場合は、自前でクラスを挿入してして別のスタイルを適用させるぐらいしか今のところ解決策が思いつかないです。
  良い方法を見つけたら修正したいと思います。
  - この返信は11年、 5ヶ月前にわいひらが編集しました。
  - この返信は11年、 5ヶ月前にわいひらが編集しました。
- 2014年9月1日 11:20 PM #1214
  
  Takeshi Miyata
  ゲスト
  
  ありがとうございます！こちらの方法でひとまず対応しました。
  おそらく、Instagram標準の埋め込みではなく、下記ブックマークレットの書式を適用すれば
  問題は出ないことも確認しました。
  
  http://www.feelingplace.com/2013/06/25/070000/
  
  ありがとうございました。
- 2014年9月2日 6:33 AM #1216
  
  わいひら
  キーマスター
  
  教えてもらったページをヒントにいろいろ調べていたら、
  うまくいく方法を編み出すことができました。
  次のバージョンで、多分対応できると思います。
- 2014年9月2日 4:57 PM #1219
  
  Takeshi Miyata
  ゲスト
  
  ありがとうございます！
  こちら、楽しみにしております。
投稿者

投稿