ワードプレスでYouTubeを埋め込むとはみ出る問題をCSSで簡単解決

ワードプレスでYouTubeを埋め込むとスマホで見た時に画面からはみ出してしまう…。

これって、結構困りますよね。スマホユーザーは業界によっては９割、平均的には７～８割といわれるので、「スマホでYoutubeがはみ出る問題」は見過ごせません。Googleが重要視するユーザー体験が損なわれると、サイトの評価にも直結するからですね。

でも安心してください。この問題、実はCSSに数行のコードを追加するだけで簡単に解決できるんです。function.phpファイルに記述してstyle.cssで調整したり、divタグで囲んでstyle.cssへ記述したりする方法もありますが、もっともシンプルだと思います。もちろんプラグインを追加する必要もありません。

Youtubeがスマホではみ出る問題は、CSSで簡単解決！

なぜ、「スマホでYoutubeがはみ出る問題」が発生するかというと、ビデオが静的な幅で埋め込まれるため、デバイスの画面幅に応じてサイズが動的に変化しないからです。

この問題を解決するのは意外と簡単です。必要なのは、WordPressのテーマにあるstyle.cssファイルやカスタマイズ画面の「追加CSS」に、以下のコードを追加するだけ。

.wp-block-embed-youtube {
  position: relative;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  height: 0;
  overflow: hidden;
}

.wp-block-embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これで、多くの場合、解決します。

CSSコードの記述先について

運用しているテーマや環境により異なりますが、ワードプレスであれば、以下、３つのいずれかで対応可能なはずです。

もっともベーシックなstyle.cssファイルに記述する方法を紹介しておきますね。

この単純な変更で、YouTubeビデオを含むあらゆるページが、どのデバイス上でも完璧に表示されるようになります。

CSSコードの役割を簡単解説

なぜ、このコードが有効なのか、簡単に解説しておきます。

ポイントは、position: relative;とposition: absolute;の使用です。iframe内のYoutubeが親要素の.wp-block-embed-youtubeに対して相対的に配置され、widthとheightが動的に調整されます。

コードを追加しても、反映されない場合の解決策

時には、上記のCSSコードを追加したにも関わらず、変更がサイトに反映されない場合があります。そんな時は、以下の対処をしてみてください。

キャッシュのクリア

最も多いのがキャッシュが残ってるケース。WEBサイトやブラウザにキャッシュが残っていると、古い情報が表示され続けることがあります。この問題を解決するには、サイトのキャッシュをクリアする必要があります。WordPressにはキャッシュを管理するプラグインが多数ありますので、それらを使用するか、ブラウザのキャッシュをクリアしてみてください。

CSSファイルの正しい場所への追加

ワードプレスの構築環境によって、CSSコードをテーマのスタイルシートに追加しても、それが適切な場所にないために反映されないケースがあります。子テーマを使用している場合は、子テーマのstyle.cssファイルにコードを追加することを確認してください。また、CSSの変更がテーマやプラグインによって上書きされていないかも確認しましょう。

プラグインの競合

WordPressサイトで多くのプラグインを使用している場合、これらが原因でCSSの変更が反映されないことがあります。特に、キャッシュや最適化、あるいはビジュアルエディタプラグインは、CSSに影響を与える可能性が高いです。プラグインを一時的に無効化し、問題が解決するかどうかを確認してみてください。

ハードリフレッシュの実行

ブラウザによっては、強制的にページを再読み込みすることで、キャッシュされたコンテンツを無視して最新の情報を表示する「ハードリフレッシュ」が有効です。WindowsではCtrl + F5、MacではCommand + Shift + Rを押すことで実行できます。

まとめ

この記事を通じて、ワードプレスでYouTubeを埋め込む際の「はみ出る問題」の解決策と、ちょっとしたCSSの解説をしてみました。解決策は簡単ですが、その構造を理解しておくと応用が効きます。

あなたの参考になれば幸いです！

このフィールドは空白のままにしてください

お名前

メールアドレス *

ご登録いただくと、月1～2回、更新通知を送らせていただきます。

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。

このフィールドは空白のままにしてください

お名前

メールアドレス *

ご登録いただくと、月1～2回、更新通知を送らせていただきます。

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。