Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Google MapやYoutubeをレスポンシブ対応させる方法

WebサイトにGoogle Mapを埋め込んだり、Youtubeの動画を埋め込んだりすると、スマホで見た時等に表示が崩れる…YoutubeやGoogle Mapのwidthに合わせるために本体が細くなったり、逆に横スクロールバーが出たりなどします。

その解決策と詰んだ部分をシェアしたいと思います。

YoutubeやGoogle Mapを埋め込み、レスポンシブ対応させる

YoutubeやGoogle Mapを埋め込むコードをdivで囲みます。
CSSで指定するためにクラス名を適当につけてくださいね。

<div class="google-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.1066533798594!2d135.4937565508161!3d34.70248979053399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e68d95e3a70b%3A0x1baec822e859c84a!2z5aSn6Ziq6aeF!5e0!3m2!1sja!2sjp!4v1491495576526" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
.google-map {
    position: relative;
    width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
    padding-bottom: 56.25%;    /* padding-topでもOK */
    overflow: hidden;
}
.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    /* 必要であれば!importantを付けてください */
    height: 100%;    /* 必要であれば!importantを付けてください */
}

paddingでレスポンシブを実装しています。
アスペクト比が16:9の場合は56.25%、4:3の場合は75%です。
(16:9の場合→9 / 16 * 100 = 56.25)

Youtubeの場合、iframeの他にも追加しないといけませんが、今回は省略。

display:flex;が適応されている部分での使用は避ける

この方法で何度やってもGoogle Mapを埋め込んだ直下に記載したテキストが埋もれてしまうので詰んでました。
そして気づきました。
この方法でiframeなどをレスポンシブ対応させる解説にはなくて、私の製作中のファイルにはある違いを。

CSS3からのフレキシブルボックスが便利すぎるので利用していたんですが、この手法を使いたい場合、親要素にフレキシブルボックスが適応されていると、上手く表示しないです。

代用として、この部分だけfloatで指定して回避しました。

まとめ

同じようなことで詰んでしまった方が居るんじゃないかと思ったのでまとめてみました。
個人的にfloatよりもflexを利用することが多いので同じような躓きポイントをシェア!

最後までご閲覧ありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
34
Help us understand the problem. What are the problem?