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

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

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

▼HTML

<div class=”youtube”>
youtubeの動画コード(<iframe ~</iframe>)
</div>

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

※コード参照・引用
http://rikudesign.com/archives/2629

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

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

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

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

———————————

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

<div class=”youtube”>
youtubeの動画コード(<iframe ~</iframe>)
</div>