YouTubeの貼り付けタグで、レスポンシブ対応するには？

youtubeのhtmlタグをwebページに貼り付けたけど、

レスポンシブ対応してくれないので困った件で
備忘録としてメモ。

youtubeにログインして、アップロードを終えたら。。。

１）[埋め込みコード] をクリックします。

２）ボックスに HTML コードがでてくるので、コピーします。

３）自分のブログやwebサイトの HTML に、上記のコードを貼り付けます。

４）次に、上記全体をdivタグでを囲い、クラス名を【youtube】として、上書き保存。

html側に↓

<pre class="lang:default decode:true">
<div class="youtube">
<iframe 〜　--- ここに youtubeの[埋め込みコード]を貼り付ける ---　〜</iframe>
</div>

css側に↓

/* youtubeレスポンシブ */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

これで無事にレスポンシブ対応できました。