[YouTube]埋め込み動画をレスポンシブさせる確実なやり方

どのブログを見ても、詰めが甘く参考にならないので書いておく。

デモを見る

コードの要点

  • 埋め込みiframeをボックス要素で二重にネスト
  • ブレークポイント768px(iPad縦表示)以上で、iframe直上ボックスのpaddingを解除
  • ブレークポイント768px以上で、iframeの横幅と高さをピクセル固定・相対配置に
  • height 0 / overflow hiddenなどは不要

    • このエントリーをはてなブックマークに追加