当ブログではWordpressのテーマにCocoonを使用しているのですが、そのテーマの機能にYoutube動画を貼り付けたときの高速化機能というものがあります。これはありがたいと使用したのですが、なぜか本文と貼り付けた動画の間に変なスペースができてしまい悩んでいました。普通にIframeによる埋め込みを行うとそのようなことはありませんでした。
以下にCocoonのYoutube埋め込み動画の高速化機能を使用した動画と普通のiframe埋め込みを使用した場合の両方を示します。
CocoonのYoutube埋め込み動画の高速化機能を使用した動画
本文との間に変なスペースができる。
普通のiframeによる埋め込み表示
スペースはできない。
対応策はないかとCocoonのフォーラムやネットで検索しても同様な現象に悩んでいる人は出てこなかったので、これは自分の環境の問題かと思い、Chromeデベロッパーツールを使用して原因を探ってみました。
その結果、”wp-block-embed__wrapper”というクラスのところでheightが840pxに設定してあるらしいのはわかったので、とりあえずカスタムcssでこのクラスのheightをいろいろ変えてみたのですが、うまくいきませんでした。
デベロッパーツールでhtmlとcssを眺めること数時間、このクラスは果たしてCocoonのものなのだろうかという疑問がわき、もしかして、Wordpressが付けているものかもしれないと疑い始め、そういえばWordpressを使い始めたとき新しいエディタのGutenbergっていうのを使用してみませんかみたいな表示がでてそのまま使用していたことを思い出しクラッシックエディターに変えてみたら案の定スペースができませんでした。
つまり新しいエディタであるGutenbergを使用した際、勝手に書き込まれるクラスが悪さをしているらしいと言うことがわかりました。ただ、私の能力ではここまでが精一杯で、対応策として今後はクラッシックエディターを使用していくことにしました。
CocoonのYoutube埋め込み動画高速化機能は、WordPressプラグインの「Youtube SpeedLoad」のソースコードを参考にされているとのことなので、もしかすると同プラグインを使用していても起こるかもしれません。そこで、同じように悩む人がいるかもしれないため、本文を記事として残しておこうと思います。
なお、本記事は Gutenbergで書いており、クラッシックエディターで書いた検証用のページも作成しましたので合わせてご覧下さい。 必要ないと思うので削除しました。
