Youtube埋め込み動画をレスポンシブ対応させる方法

Web制作 - HTML・CSS
この記事は約 1 分で読めます ( 約 442 文字 )

Youtube埋め込み動画をレスポンシブ対応させる HTML・CSS の記述をご紹介します。
動画埋め込みの <iframe> ソースをそのまま記述するとスマホ等では枠からはみ出しますので次の方法でレスポンシブ対応にすることができます。

 

 

Youtube 埋め込み動画をレスポンシブ対応させるための記述

 

【 1 】次の CSS を追加してください

画面横幅 959 px 以下からレスポンシブ対応になります。

 

【 2 】埋め込み動画の記述を <div class="youtube"> ~ </div> で囲んでください

 

 

カエテングラフカエテンWPは予め CSS をセットしていますので追加は不要です。埋め込み動画の記述を <div class="youtube"> ~ </div> で囲むことだけをしてください。

 

関連記事