【WordPress】YouTube Shortsの動画埋め込みが、急にできなくなった

丁度更新が滞っていたこの1ケ月ぐらいの期間で、急にYouTubeのShortsがWordPressに埋め込みできなくなった。
全部コードエディタで編集していると時間がかかるので、ビジュアルエディターを併用しているのだが、URL貼り付ければ簡単に埋め込みができていたのに、なぜか上手くいかない。

テーマの問題か?

まず、使用しているLuxeritasのテーマの問題かと思い、関連するワードでググって調べていたのだが、特にそのような記事は見つからなかった。
バージョンの問題かもしれないと思ったが、この期間でバージョンダウンもしてないし、その前は問題無くできていたのだから、これも原因ではないと判断。

検証

以前更新した記事の動画は問題無し

まず、以前更新した記事で、同じようにShortsの動画を埋め込んでいる投稿を確認した。これは問題なく、埋め込みできている。一度埋め込んであるのは、問題無く動作しているようだ。

youtube埋め込み、コピペを試すも上手くいかない

ビジュアルエディターでYouTubeからコピーしてきたURLを貼り付けるもダメで、ブロック追加のYouTubeで試しても上手くいかない。

埋め込みができない

中身を見る

埋め込みできてない場合のコード

上記の画像で上手く埋め込みできてない場合のコードを、コードエディタで確認する。すると、以下のようになっている。

<!-- wp:embed {"url":"https://www.youtube.com/shorts/GivA14io-E8"} -->
<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
https://www.youtube.com/shorts/GivA14io-E8
</div></figure>
<!-- /wp:embed -->

方法① 以前更新したShortsで埋め込みできてたコード

<!-- wp:core-embed/youtube {"url":"https://youtu.be/eFltcGrafps","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">https://youtu.be/eFltcGrafps
</div><figcaption>実際のレース</figcaption></figure>
<!-- /wp:core-embed/youtube -->

ここに、投稿したいShortsのURLを変更していけば、埋め込みができた。

実際に変更するのは、①urlのところ、②<div></div>の中にURLの2点。ここを新しく更新したいURLに変えてやれば、埋め込みできる。例えば、「https://www.youtube.com/shorts/GivA14io-E8」をurlのところに入れてやる。これで埋め込みできた。

方法② 方法①のコードの一部を変える

方法①で「"url":"https://youtu.be/eFltcGrafps"」のところを全て「"url":"https://www.youtube.com/shorts/GivA14io-E8″」に変えてやると言ったが、パスの一部を変えるだけでも大丈夫だった。例えば、「"url":"https://youtu.be/GivA14io-E8″」としてやるだけで良い。
実際どちらも同じリンク先に飛ぶのだが、どうやら変換がWordPress側で上手くいかずに、正しく埋め込みができていないっぽい。

方法③ URLを「watch?v=」の形にする

どうやら、Shorts以外なら問題なくYouTubeでも埋め込みできた。このときのコードを見てみる。
ここの<div>の中にあるURLに、Shortsの動画のパスを入れてやったもの。
例えば、ShortsのURLが「www.youtube.com/shorts/hogehogehoge」となっていたら、「watch?v=hogehogehoge」とする。これで埋め込みできた。

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=GivA14io-E8","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">https://www.youtube.com/watch?v=GivA14io-E8</div>
<figcaption>
<strong>ビリから差し切るトウカイテイオー(ライブラ杯)</strong>
</figcaption>
</figure>
<!-- /wp:core-embed/youtube -->

結果

というわけで、上記で使用していたURLは、実際に異世界攻略班のチャンネルで更新した「ウマ娘」の動画になる。
なんかWordPressって、時々こういうの起こるから嫌だよね。

上手くいかない時

上手くいった時

ビリから差し切るトウカイテイオー(ライブラ杯)

以上

column, html/css, programming, wordpress

Posted by himajinn