らっぱ王子

このサイトはブラウザの大きさに合わせてレイアウトが変化するレスポンシブ対応にしているのだけど、YouTubeの動画埋め込みをすると、そこだけサイズが固定されたまま。ブラウザサイズが小さいとはみ出る。

そこで、埋め込み動画をレスポンシブに対応できないか調べてみたら方法が。

CSSの記述

@media only screen and (max-width : 640px) {
  div .ResponsiveWrap {
    padding-bottom: 56.25%;
    position: relative;
  }
  .ResponsiveWrap iframe {
    width: 100%;
    height: 100% !important;
    position: absolute;
  }
}

　

HTMLの記述

<div class="ResponsiveWrap">
  <iframe width="640" height="360" src="YouTubeの動画URL" frameborder="0" allowfullscreen></iframe>
</div>

これでいけました。サンプルページ

上の記述の場合、幅640以下になると追従して小さくなり始めるアスペクト比16:9の iframe に使用できる。(padding-bottom: 56.25%;の部分が16:9の高さ指定になってる)

GoogleMapの貼り付けにも応用が効くみたい。他にも iframe を使ったもので使いどころあるかも。

参考
GoogleマップやYou Tubeのiframeをレスポンシブ対応させてやんよ!!! (ときどきWEB)