wordpressでのyoutube埋め込み時にPC／スマホ双方でちょうどよい規格にしたい場合

Question

タイトルにあります通り、wordpressで作成した既存の会社のHP上に、youtubeにしたPR動画を埋め込んで反映させたかったのですが、

<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXX(＝※自動で生成される個別No.)?rel=0" frameborder="0" allowfullscreen></iframe>

として、PC上で映る比率を見やすい設定にした場合は、スマホで見ると大きすぎて右側が見切れてしまい、
聞きかじった知識で、テキスト内に

<iframe src="https://www.youtube.com/embed/XXXX(＝※自動で生成される個別No.)" width="100%" height=240"" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

と貼り付けてみたところ、スマホではちょうどよく映るのですが今度はPCで見るといやにひらべったい比率（縦１：横３くらい？）の映像になってしまいす。
この点を改善できる方法をどなたかご教示いただけませんでしょうか？

よろしくお願いいたします。

Answer 1

max-width を指定してください。
インラインで書く場合はこうなります。

<iframe style="max-width:100%" width="560" height="315" src="https://www.youtube.com/embed/XXXX(＝※自動で生成される個別No.)?rel=0" frameborder="0" allowfullscreen></iframe>

Comments

[TFMsoumu]

上記のコピペでPCもスマホも見やすい規格になりました。ありがとうございました。

Answer 2

これがベストプラクティスということではありませんが、一例として Twitter Bootstrap ではこうやってるよ、というサンプルが以下のとおりです。

https://getbootstrap.com/docs/4.3/utilities/embed/

<style>
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}
</style>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/HaJUWRziDQc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Comments

[TFMsoumu]

早速のご回答ありがとうございます。いただきましたコードをワードプレス上に貼り付けて、HaJUWRziDQcの部分を会社の個別NO.に打ち換えて更新したところ「このコンテンツはフレーム内に表示できません」との文章が出現しました（スマホは何も映らず空白でした）。上記文字の下部に「このコンテンツを新しいウインドウで開く」をクリックすると埋め込みたいyoutubeのページに飛ぶことができました。コピペの過程で何か誤った操作をしてしまったでしょうか？例示で使われたBABYMETALの動画のままでしたら問題なく閲覧できました。
お手数ですがこの点ご教示いただけますと大変ありがたいです。
よろしくお願いします。

[TFMsoumu]

連投で申し訳ありません、他の回答者様からのご連絡にて上記問題は無事解決いたしました。ありがとうございました。