Gutenbergによるyoutube埋め込み動画の高速化機能の不具合について

9月25日追記:Cocoonフォーラムにて本不具合について報告したところ、テーマ作成者のわいひらさんが不具合を修正したバージョンを作成してくださり、本ブログに適用したため、この記事に掲載の不具合は解消されていますが、情報共有のため記事は残しておきます。修正バージョンは程なく配布されると思われます。

当ブログではWordpressのテーマにCocoonを使用しているのですが、そのテーマの機能にYoutube動画を貼り付けたときの高速化機能というものがあります。これはありがたいと使用したのですが、なぜか本文と貼り付けた動画の間に変なスペースができてしまい悩んでいました。普通にIframeによる埋め込みを行うとそのようなことはありませんでした。

以下にCocoonのYoutube埋め込み動画の高速化機能を使用した動画と普通のiframe埋め込みを使用した場合の両方を示します。

CocoonのYoutube埋め込み動画の高速化機能を使用した動画

本文との間に変なスペースができる。

9月25日追記:ここの間に400pxぐらいのスペースができていました。
[몬스타]유재하 "지난날"_민세이&맨인블랙(용준형,비투비) @몬스타 1화

普通のiframeによる埋め込み表示

スペースはできない。

対応策はないかとCocoonのフォーラムやネットで検索しても同様な現象に悩んでいる人は出てこなかったので、これは自分の環境の問題かと思い、Chromeデベロッパーツールを使用して原因を探ってみました。

その結果、”wp-block-embed__wrapper”というクラスのところでheightが840pxに設定してあるらしいのはわかったので、とりあえずカスタムcssでこのクラスのheightをいろいろ変えてみたのですが、うまくいきませんでした。

デベロッパーツールでhtmlとcssを眺めること数時間、このクラスは果たしてCocoonのものなのだろうかという疑問がわき、もしかして、Wordpressが付けているものかもしれないと疑い始め、そういえばWordpressを使い始めたとき新しいエディタのGutenbergっていうのを使用してみませんかみたいな表示がでてそのまま使用していたことを思い出しクラッシックエディターに変えてみたら案の定スペースができませんでした。

つまり新しいエディタであるGutenbergを使用した際、勝手に書き込まれるクラスが悪さをしているらしいと言うことがわかりました。ただ、私の能力ではここまでが精一杯で、対応策として今後はクラッシックエディターを使用していくことにしました。

CocoonのYoutube埋め込み動画高速化機能は、WordPressプラグインの「Youtube SpeedLoad」のソースコードを参考にされているとのことなので、もしかすると同プラグインを使用していても起こるかもしれません。そこで、同じように悩む人がいるかもしれないため、本文を記事として残しておこうと思います。

なお、本記事は Gutenbergで書いており、クラッシックエディターで書いた検証用のページも作成しましたので合わせてご覧下さい。 必要ないと思うので削除しました。

タイトルとURLをコピーしました