Youtube動画がWordPressで思い通りに表示されない原因と解決方法！レスポンシブ・URLをそのまま表示・横並び配置等

2024/07/05
2024/06/02
HowTo, WordPress
WordPress

WordPress（ワードプレス）の投稿にYoutubeの動画を表示させたい時、URLをそのまま貼るだけで自動でこんな感じに表示されてくれます。

（このUsherの動画はたまたま最近聞いていたお気に入りなだけで、深い意味はありません。）

ただ複数のサイトを管理していると、そのサイトごとに微妙に設定が違うので「思ったように表示してくれない！レスポンシブで100%表示にできない！」など、うまく設定できず、なかなか毎回苦労してしまいます。

というわけで今回は、Youtube動画がWordPress（ワードプレス）で思い通りに表示されない原因・対処法・解決方法（設定方法）を、いくつかのトラブル例を挙げて書いていきます。

Youtube動画がWordPressで表示される仕組み

まずはYoutube動画がWordPress（ワードプレス）で表示される仕組みを簡単に。

WordPress（ワードプレス）では、Youtube動画のURLを投稿の管理画面にそのまま貼り付けると、以下のよな状態で出力され、自動で動画が表示される『oEmbed』という機能があります。

https://www.youtube.com/watch?v=〇〇〇〇〇〇

と入力すると、

<iframe class="youtube-player" width="640（設定した数値）" height="360（設定した数値）" src="https://www.youtube.com/embed/〇〇〇〇〇〇"></iframe>

と出力され、表示されます

ちなみにプラグインに『Jetpack』を入れている方も多いかと思いますが、その場合は、

<span class="embed-youtube">
  <iframe class="youtube-player" width="640（設定した数値）" height="360（設定した数値）" src="https://www.youtube.com/embed/〇〇〇〇〇〇"></iframe>
</span>

と出力され、表示されます。

いらないものを省いてだいぶシンプルに記述していますが、だいたいこんな感じで
『Jetpack』なしの場合は「youtube-player」のクラスがついたiframeタグとして出力（表示）され、
『Jetpack』ありの場合は「embed-youtube」のクラスのついたspanタグが、そのiframeタグを囲った状態で出力（表示）される。といった仕組みです。

ただ、上記はバージョンによって違いがあったんですよね。（詳細はYoutubeの動画がレスポンシブ対応にできない！にて。）

そんなわけでこの『Jetpack』はアップデートしたら表示されないようになったり、他のプラグインが動かなくなったり等、色々と悪さをしてくれるのですが、もうこれが入っているのを前提で色々設定してるので、この『Jetpack』ありバージョンも一緒に書いていきたいと思います。

ちなみにこれはYoutubeに限った話ではなく、FacebookやInstagram等、対応したサイトでも同じようになるようです。
今回はYoutubeの話なので割愛しますが、詳細はや対応しているサイトは『詳細はこちらにて』にて確認できます。
これを踏まえて、いくつかのトラブルやパターンを書いていきます。

Youtubeの動画が表示されない原因と解決方法

1. YoutubeのURLを文字列で表示させたいのに、でてこない！

この原因は上記の仕組みがわかっていれば簡単ですが、仕組みをそれを知らない、忘れていると『？』となってしまいますよね。

何も設定していない場合は上記の通り、Youtube動画のURLを貼り付けると動画が自動表示されますので、それを回避したい場合は以下の記述を「functions.php」に追加します。

// oEmbedを無効にする
remove_filter('the_content', array($wp_embed, 'autoembed'), 8);

これでYoutube動画は表示されず、文字列として表示されてくれます。

2. YoutubeのURLを文字列で表示させるだけでなく、動画の表示もさせたい！

動画は表示したいけど、そのURL（文字列）も表示もしたい、という時もありますよね。

そんな時は上記に加え、

[ embed ]YoutubeのURL[ /embed ]

のように、embedのショートコードとして記述すれば、（半角スペースは削除）

<a href="YoutubeのURL">YoutubeのURL</a>

のように、URLがaタグで括われて『URL』として出力され、さらには動画も表示されるようになります。

ちなみに、ショートコードは『[ embed ]』のようにembedの前後に半角を入れてますが、これは消してくださいね。
うまくここで表示できない（aタグで変換されて表示できない）ので、それを回避するために半角スペースを入れているだけですので。

3. Youtubeの動画がレスポンシブ対応にできない！

cssで何も設定していない場合は、ただYoutube動画が表示されるだけで、レスポンシブ対応はしてくれません。

昔はレスポンシブという言葉もなく固定の幅だったので問題なかったのですが、今はレスポンシブは当たり前ですし、特にスマホでの閲覧がかなりの割合を占めていますので、このままではYoutube動画がはみ出したり、大きなパソコンの画面では反対に小さく表示されてしまいます。

ですのでcssで以下の設定をします。

『Jetpack』が入っている場合

『Jetpack』が入っている場合は、iframeがspanで囲われているので、以下のように記載すればOKです。

.embed-youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.youtube-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

基本はこれで大丈夫と思いますが、実は『Jetpack』のバージョンによってはYoutubeに関する記述が少し異なっていて、これではできないものもあったんですよね。

ですので『Jetpack』のバージョンや、表示させるサイトの設定等によってはうまくいかない場合もありますので、以下を参考にしてみてください。

『Jetpack』が入っていない・入っていててもうまくいかない場合

iframe が span で囲われて出てきてくれない！といった症状がでてきたサイトがありました。

そこで色々調べていると、『Jetpack』のバージョンによっては、Youtubeに関する記述が少し異なっていて、これではできないものもあったんですよね。

ちなみに以下が『Jetpack』のYoutubeに関連する記述のあった場所です。

wp-content > plugins > jetpack > modules > shortcodes > youtube.php

ここを昔のバージョン（iframe が span で囲われてくれるバージョン）と新しいバージョン（iframe が span で囲われてくれないバージョン）を比較してみると、少し記載が異なっていました。

ただ見る限り、同じように iframe は span で囲われて出力される記載だったので、『Jetpack』が入っていててもうまくいかないと言う場合は、おそらく何かが干渉しているが原因ではないかと思います。
ですので本当はその原因を探して解決すべきかと思いますが、時間がなかったり、プラグイン入れすぎてもうどれが原因かわからない！となっている方は、以下のコードをfunctions.phpに追記して、強制的に iframe を span で囲う記述を追加してみてください。

// <iframe>を<span>で囲う
function custom_youtube_shortcode_output( $html, $url, $attr, $post_id ) {
  // クラスの追加
  $html = preg_replace(
    '/<iframe /',
    '<iframe class="youtube-player" ',
    $html
  );
  // spanタグで囲む
  $html = '<span class="embed-youtube" style="display: block;">' . $html . '</span>';
  return $html;
}
add_filter( 'embed_oembed_html', 'custom_youtube_shortcode_output', 10, 4 );
add_filter( 'video_embed_html', 'custom_youtube_shortcode_output' ); // Jetpack用

これでその他の干渉や原因が他になければ、iframe は span で囲われて出力され、うまく表示されるはずです。

ただ、原因がわからず強制的に修正するのは、後々他のトラブルでの対処が複雑化してくると思うので、なるべくその原因は突き止めて、その上でこの記述を使うようにしてくださいね！