3月
15

「Flickr」「YouTube」をブログに埋め込むと、レスポンシブが上手くいかなかった「iframe」をテスト中

3月 15, 2014in AppleTag: ,

昨日書いたエントリで、Flickrの画像を埋め込む際に、「iframe」というタグなので、
iPhoneなどのスマートフォンで見ると、画像がはみ出る現象が起っていました。

@Gaku0318さんにヒントを教えて頂きました。
わざわざ、スクショまで撮ってコードを教えて頂きました。
本当にありがとうございました(((o(*゚▽゚*)o)))

Flickrのベータ版を試してみたけど。うーむ。。 | iPhoneとマヨテキメモ
急場凌ぎで、サイズダウンしています。

CSSに追加しました

本当に上手くいっているか、わかりませんので、
コードは成功したら多分追記します。

テストです

「iframe」で取得したものをアップしてみます。

まず、YouTubeです。先日のColdplayもはみ出てたっけ。
大好きな、まぐにぃのiPhoneちゃんねるです!

ついでなので、ぐーぐるまっぷの埋め込みもしてみます。
上手くいくと、いいな〜(。・ω・。)
東京へいくと、だいたい仲間と一緒に行きます。
でも、予約は取りづらい人気の居酒屋さんです。

最近あっぷしてないけど、「Instagram」

うまくいくと、いいけど・・・
失敗したら、削除するかも。

追記:2014-03-15 18:00
あまり、参考にならないかもですが、一応こんな感じにしてみました。
埋め込みに変換できるサイトがあったのですが、Flickrがありませんでした。
ぐぐったら、知り合いの方がいっぱいエントリにしていました。
ありがとうございます!

/*------iframe 各種------*/
.youtube-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}
 .youtube-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.flickr-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flickr-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

.instagram-container {
position: relative;
width: 100%;
padding-bottom: 120%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.instagram-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.googlemap-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.googlemap-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

iPhone 5sの他のデバイスでも見てみました。
iPad miniは、なんとかいける?でも
(´ε`;)ウーン…やはり難しいです

Nexus 5
Nexus 5 Photo by mayo1950

iPad mini縦
iPad mini縦 Photo by mayo1950

iPad mini横
iPad mini横 Photo by mayo1950

iPad Air縦
iPad Air縦 Photo by mayo1950

iPad Air横
iPad Air横 Photo by mayo1950

【こちらの関連記事もご覧ください】


記事をお読み頂き、ありがとうございます!

記事の内容を気に入って頂けましたか?
もし気に入って頂けましたら、
ソーシャルボタンで共有頂ければ、とても嬉しいです♪


follow us in feedly RSS

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is kept spam free by WP-SpamFree.