※この記事にはプロモーションが含まれています
ワードプレスで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コードの記述先について
運用しているテーマや環境により異なりますが、ワードプレスであれば、以下、３つのいずれかで対応可能なはずです。
１．WordPressのテーマにあるstyle.cssファイルに追加
２．外観＞カスタマイズ＞追加CSSに追加
３．使用テーマ専用のcss管理画面に追加
もっともベーシックなstyle.cssファイルに記述する方法を紹介しておきますね。
- WordPressのダッシュボードにログインします。
- 外観 > テーマエディタを選択します。
- 右側のテーマファイルリストから、スタイルシート (style.css) を探し、選択します。
- ファイルの最後に、上記のコードをコピー＆ペーストします。
- ファイルを更新ボタンをクリックして変更を保存します。
この単純な変更で、YouTubeビデオを含むあらゆるページが、どのデバイス上でも完璧に表示されるようになります。
CSSコードの役割を簡単解説
なぜ、このコードが有効なのか、簡単に解説しておきます。
.wp-block-embed-youtubeのスタイル
position: relative;: このプロパティは、iframeが相対的な位置を基準として配置されるようにします。これにより、iframeが親要素に対して絶対位置を取ることが可能になります。padding-bottom: 56.25%;: これは16:9のアスペクト比を保持するためのもの。Youtubeの幅に対する高さの比率をパーセンテージで表したもので、スマホ表示する際、ビデオが適切な比率で表示されるようにします。height: 0;: このプロパティは、親要素の高さを0に設定し、padding-bottomで定義された高さのみが適用されるようにするためのもの。これにより、コンテンツの重なりを防ぎます。overflow: hidden;: これは、親要素の範囲を超えるコンテンツ（この場合はiframe）が表示されないようにするためのものです。
.wp-block-embed-youtube iframeのスタイル
position: absolute;: このプロパティはiframeを親要素の相対的位置に基づいて配置します。これにより、iframeが親要素の全体にフィットするようになります。top: 0; left: 0; width: 100%; height: 100%;: これらのプロパティは、iframeが親要素の上端から始まり、幅と高さが親要素を完全にカバーするようにするためのものです。これにより、Youtubeがレスポンシブに表示され、あらゆるデバイスの画面サイズに適切に調整されます。
ポイントは、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の解説をしてみました。解決策は簡単ですが、その構造を理解しておくと応用が効きます。
あなたの参考になれば幸いです！