【CSS】Youtube動画の埋め込みをレスポンシブ風にする

手抜きなレスポンシブ風

iframe[src^="https://www.youtube.com/"],
iframe[src^="http://www.youtube.com/"]{
  max-width: 100%;
}

@media screen and (max-width: 420px){
    iframe[src^="https://www.youtube.com/"],
    iframe[src^="http://www.youtube.com/"]{
    {
        height:auto;
    }
}

「max-width: 100%;」を付けるだけでも、はみ出さないようにはなります。Youtubeの場合は、タイトルとかコントロールボタンが上下につくので、アスペクト比が少し変わっても不自然さがあまりないというのはあるかと思います。

しかし、あまりにも幅が狭くなると長方形（アスペクト比が違う）なのが目立つ感じなので、スマホの時だけ「height:auto;」を追加してみました。

参考

<div class="iframeWrap" style="padding-top: 56.25%;">
<iframe width="320" height="180" src="https://www.youtube.com/embed/xxxxxx"></iframe>
</div>

56.25%は、アスペクト比を指定する。

div.iframeWrap {
  position: relative;
  width: 100%;
}
div.iframeWrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

・2012.11.06｜iframe要素（Youtubeなど）のレスポンシブ対応 | HTML5/CSS3, JavaScript 次世代WEB研究開発

検索でよく見かけるのは、 iframe要素をラップして、CSSでやる手法みたいです。
あとJavascript（jQueryを含む）での対応ですね。

CSS3からは・・

.iframe-wrapper {
  width: 100%;
  padding: calc(315 / 560 * 100%) 0 0 /* topを0、bottomをcalc()としてもOK */
}

・iframe要素のスマホ対応 – CSSとJavaScriptそれぞれのレスポンシブ対応方法 | maesblog

calcで計算できるようになってるので、上記のように書くことが可能です。
まあ、結局は　56.25%になりますけどね。