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を利用することが多いので同じような躓きポイントをシェア！

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