iframe をレスポンシブにしてモバイルで自動で縮小表示させる方法
iframeタグのコンテンツをレスポンシブ対応にして、モバイルでも自動で縮小表示させる方法をメモしておきます。
iframeのモバイル対応例
以下はFlickrからiframe版の埋め込みタグを取得し、モバイルを含むレスポンシブ対応を行ったサンプルです。
モバイルからのアクセスの場合、横幅一杯近くになるよう拡縮表示されているはずです。
もしPCからアクセスしているならブラウザの横幅を変更してみてください。ブラウザサイズに応じて、iframe内に表示されている写真のサイズも変更されるはずです。
iframeをレスポンシブにする方法
上記対応に係わるCSSコードは以下の通りです。
.iframeWrap {position: relative;padding-bottom: 80%;height: 0;overflow: hidden;}
.iframeWrap iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
上記CSSを適用した上で、iframeの貼り付けコードを <div class="iframeWrap"> など、iframeWrapのクラスを持つタグで囲みます。
<div class="iframeWrap"> <iframe src="https://www.flickr.com/photos/hide10/13000305743/player/" width="640" height="425" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe> </div>
これでiframeの表示がレスポンシブになります。
flickrだけではなく、GoogleマップやYouTubeなどiframeを利用した埋め込みタグで有効なテクニックですので、覚えておいて損はないと思います。
☆ 新しいGoogleマップをレスポンシブ対応で埋め込む方法 : ライフハッカー［日本版］ [参考]
☆ Googleマップの貼り付けコードをレスポンシブにしてみた | Hinemosu [関連記事]