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

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

デモを見る

コードの要点

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

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。

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