youtube埋め込み動画を「レスポンシブだけど、最大値は原寸サイズ」にする場合

youtubeの動画をワードプレスなど、
HPに埋め込みたい場合、
①スタイルシートにサイズを指定
②埋め込むページの動画に「①」を指示するdivでくくる
という流れになります。

一般的にはこうです。
—————————————-
▼スタイルシート（CSS）に下記をそのままコピペ

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

▼HTML

<div class=”youtube”>
youtubeの動画コード（<iframe ～</iframe>）
</div>

—————————————-

※コード参照・引用

http://rikudesign.com/archives/2629

一般的にはどのサイトも上記のような説明です。
が、これだと、ページの画面幅いっぱいに動画が表示されます。
スマホなら問題ないですが、PC画面だと、例えば１カラムのサイトなど
動画がでかくてしょうがありません。

実際、youtubeの動画は、何もしなければ
width=”560″ height=”315″ で固定されています。（2018年４月現在）

それでは、埋め込み動画をレスポンシブにしながら、
最大値を原寸サイズの
「最大幅（max-width）560px」「最大高さ（max-heigh）315px」に指定する方法を下記のとおり。

▼スタイルシートに
———————————

/*YouTube最大値指定*/

.youtube {
  position:relative;
  width: 100%;
  max-width: 560px;
}

.youtube::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

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

———————————

あとは、HTMLをdivで囲むのは従来と同じ。