youtube等をiframeで入れ込んだ時にレスポンシブ対応にする方法

参考:http://mae.chab.in/archives/2527
youtubeでなくてもいいけど、基本iframeタグは幅と高さを指定する。

<iframe width="500" height="300" ...></iframe

ただしこのままだと、500px×300pxがスマホでも確保されるため、横スクロールが発生することになる。
その対応。
 
HTML

<div class="wrap_youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/HIOooL-vXeQ" frameborder="0" allowfullscreen></iframe>
</div>

CSS

@media screen and (max-width: 560px) {
  .wrap_youtube {
    position: relative;
    width: 100%;
    padding: calc(315 / 560 * 100%) 0px 0px 0px;
  }
  .wrap_youtube iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%!important;
    height: 100%!important;
  }
}

paddingの算出にcalcを使うので、CSS3限定になるけれど、まぁ対応ブラウザは最新だけでいいや、という人ならこれで問題ないかと。