ワードプレスの投稿にYouTubeを埋め込むと、PCで見たときは横幅が足りず、スマホで見ると横にはみ出してしまう、、、なんてことがあります。

まず、YouTubeの共有で埋め込みコードを取得します。

<iframe></iframe>で囲まれたコードになっていると思います。こいつの中にwidth=”560″とheight=”315″が指定されています。そこを変更したいので、iframeに対してCSSのクラスを設定します。

<iflame class=”youtube” width=”560″ height=”315″ src=”なんたらかんたらと続く>

このようにします。CSSの方には下記のように記述します。

iframe.youtube {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}

アスペクト比の16:9を入れることで、どのメディアで見てもその比率で表示されると思います。これでうまく表示されるといいのですが、ダメな場合もあります。

埋め込まれた後のページでタグを見てみましょう。うまくいっていれば成功です。ただ、下のようになってしまう時もあります。

<iframe class=””youtube”” width=”560″ height=”315″ src=”なんたらかんたらと続く>

なぜかクラス指定したところのダブルクオーテーションが二重でついているのです。恐らく自然につく仕様のようです。やむを得ないので、先ほど設定したクラスの箇所を下記のように変えます。

<iflame class=youtube width=”560″ height=”315″ src=”なんたらかんたらと続く>

classのところをダブルクオーテーションなしにするという、なんとも不格好な形ですが、これでページを見るときちんとダブルクオーテーションで囲まれてて問題なくなりました。最初から横幅100%の埋め込みタグにならないもんかな。。