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

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

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

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

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

.youtube{text-align:center;}
.youtube iframe{max-width:100%;}
@media screen and (max-width:959px){
.youtube{padding:56.25% 0 0;}
.youtube{position:relative;width:100%;}
.youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
}

.youtube{text-align:center;}

.youtube iframe{max-width:100%;}

@media screen and (max-width:959px){

.youtube{padding:56.25% 0 0;}

.youtube{position:relative;width:100%;}

.youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

}

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

<div class="youtube">
Youtube 埋め込み動画の記述
</div>

Youtube 埋め込み動画の記述

</div>

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