Youtube動画のレスポンシブ対応

youtubeの動画をブログなどに貼り付けるとき、スマホの場合によっては、レスポンシブ化しなければならないこともあります。
そういうときには、縦の長さを含めて大きさが変わるようにするcssの設定が必要になります.

■html

■css

.youtube{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

このcssであればレスポンシブに対応された状態になります。