Gutenberg で YouTube を埋め込むと、動画のサイズが編集エリアより大きく表示されてしまう

WordPress は YouTube などの動画の埋め込みに対応しており、動画ページの URL をエディタに貼り付けるだけで自動的に動画を埋め込むことができます。もちろん、Gutenberg でも埋め込むことができるのですが、なぜか Gutenberg 上では動画のサイズがすごく大きくなってしまうという不具合に遭遇しました。

入力エリアより動画のサイズが大きい…

上記の画像のように表示されてしまいました。ただ、実際の画面ではぴったりのサイズで表示されています。

JetPack のショートコード埋め込みが原因

調べてみると、JetPack の「ショートコード埋め込み」が原因だということがわかりました。「ショートコード埋め込み」は動画を埋め込んだりするショートコードを追加するもののようですが、YouTube は WordPress 標準で埋め込みに対応していますし、そもそもショートコードじゃない部分にまえ影響がでているのはおかしいので、この機能自体をオフにしましょう。

JetPack の管理画面

http://あなたのサイトの URL/wp-admin/admin.php?page=jetpack_modules

上記の管理画面にアクセスし、「ショートコード埋め込み」を停止できます。

一応、フックからでも停止できる

JetPack のショートコードのロード部分には、jetpack_shortcodes_to_include というフィルターフックが用意されており、ここで return []; すれば「ショートコード埋め込み」が有効になっていても何も読み込ませない、ということができるようでした。

ただ、これはプログラム実行タイミングの都合でテーマからはフックできないので、プラグインからフックさせないといけない、ということで Snow Monkey では強制的に停止されるのはあきらめました…。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!