WordPress CocoonでYouTube動画のサイズ変更

WordPressに直接埋め込んでいた動画。複数の動画を埋め込んでいると、ネットが混み合う夜間には再生までかなり待たされる。解決策は1つ。ネットで常識(?)のYouTube経由で動画を埋め込むこと。

YouTube動画を埋め込む方法

埋め込み方法は大きく分けて「動画のURL」と「埋め込みコード」の貼り付けの2通りがあるが、サイズ変更やキャプション付加など編集も視野に後者を選択。
さらに「埋め込みコード」の貼り付け方法はざっと6通りある。

グーテンベルグのブロック選択エリアに

①直接貼り付ける
②ショートコード 経由で貼り付ける
③カスタムHTML 経由で貼り付ける

クラシック版の段落に

④メディアを挿入/編集ボタン(プラグインのAdvanced Editor Tools使用時) 経由で貼り付ける
⑤メニューバー 挿入ーメディア 経由で貼り付ける

コードエディターに

⑥直接貼り付ける

以上の6つから“③カスタムHTMLから貼り付ける方法”を選択した。手順は実に簡単なのだが、2度の大きな躓きも。。。
手順と注意点を時系列に紹介する。

カスタムHTML経由で貼り付ける方法

方法と言っても実に簡単。
YouTube動画から埋め込みコードをコピーし、WordPressのカスタム HTMLに貼り付けるだけ。

グーテンベルグ上で(ブロックを追加)()から[カスタム HTML]()をクリックする。

YouTube動画上で右クリックし、[< > 埋め込みコードをコピー]を選択、埋め込みコードをコピーする()。または、動画下の[共有]()をクリックしても良い。

カスタム HTMLの枠にコピーした埋め込みコードをペーストする。

HTMLプレビューを見てみると、いい感じです😊。

次にページ全体のプレビューを見てみると、少し右に空白がありますね。。。なんとかしましょう。

HTMLを編集する

HTMLの編集に戻り、サイズを同比率の1024:576に書き換えます。

HTMLプレビューでは大きくなったが、ページ全体のプレビューではまったく変化がない。いろいろ数値を変えてみるが、まったく変化がなく行き詰まる。カスタムHTML以外を試しても結果は同じ。
さらにネットで探し当てたCSSコードの追加でクラス指定を試したが、やはりダメ!!
完全な八方塞がりに右の空白には目をつむり、コピーした埋め込みコードののサイズのまま行くことにした。また、キャプションを付けるとやや右にズレてしまうため、付けるのを諦める。

結局はYouTube動画から埋め込みコードをコピーし、WordPressのカスタム HTMLに貼り付けるだけで、編集は一切なしで進めることにした。やれやれ。。。😞

縦動画の埋め込みで躓く

満足度75%ながら動画入替えを進めていると、今度は縦動画で躓いた。同じように埋め込みコードををペーストし、サイズを変更すると、左右が黒帯で中央に申し訳程度の動画。。。

これはダメでしょう👎!!っと言っても、HTMLの編集が効かないのでどうすることもできない。
しかたなく縦動画は今まで通り、直接動画を埋め込むことにした。

テーブルに埋め込む動画でも躓く

しかしそれで終わりではなく、さらに追い討ちが掛かる。山行記録の動画はテーブルの中に埋め込んでいるのだが、編集画面では設定通りなのに、プレビューではなぜか上下に空白が出来てしまう(写真は空白がわかりやすいように、テーブルのボーダーを表示している)。

こっちもどうにもならず、従来通り直接動画を埋め込むことにした。
何だかYouTube登録の意味がなくなってきた😞。

サイズ変更解決〜キーワードは改行 <Br />

一通り完了したものの、縦動画が何とかならないかとネットを探っていて、「[WordPress] Youtubeを縦長動画のままで表示する」というブログを見つけた。
</iframe>の前に改行(<br />)を入れると縦動画になるよ、というもの。こんなことで?と半信半疑ながらやってみた。
(注意)[return]キーで改行して見た目は改行していても、<br />が挿入されていないと効果がないので追記する方が良い。

見事に縦で表示された😆🙌。しかもサイズ変更も意のまま。

では、横もということでやってみると、思い描いた通りのプレビューに。。。

そしてテーブルに埋め込んだ動画も上下の空白がなくなり、他の画像と同じ位置関係になった。

右の設定エリアを表示してないときにHTMLプレビューが平べったくなるのは、ブロックタイプを「クラシック版の段落」に変更すればOK。再編集が必要ならカスタムHTMLに戻せば良いだけ。

私の行き着いたHTMLの編集内容

最終的に下記のように編集しました。は追記、は変更です。

<figure><iframe class="aligncenter" title="2022年初日の出タイムラプス 富士川緑地" src="https://www.youtube.com/embed/OwLI7pTcq5c?rel=0" allowfullscreen="allowfullscreen" width="720" height="399" frameborder="0"><br /></iframe><figcaption>2022年初日の出タイムラプス 富士川緑地</figcaption></figure>

解説
①<figure>〜<figcaption>2022年初日の出タイムラプス 富士川緑地</figcaption></figure>:キャプション追加
②class=”aligncenter” :動画センタリング
③?rel=0:動画終了後同チャンネル内の動画表示
④width=”720″ height=”399″:動画サイズ
⑤<br />:改行記号挿入(<br>でも同じ)

CocoonでCSSコード追加とクラス指定

後日CSSコード追加とクラス指定がなぜ上手くいかなかったのか、「【Cocoon】Youtube埋め込み動画のサイズが変更できない場合の対処方法」というブログで判明しました。
見ていただけるとわかりますが、CSSコードの .video-container がキーワードですね。

感想

準備万端でYouTubeに動画をアップし、WordPressに埋め込むところまでは順調だったのに、思わぬ壁に突き当たり解決まで一週間ほど掛かってしまった。そこまでの苦労(ってほどでもないが)が報われ、動画再生がかなりスムーズになった。
埋め込む動画を全て同じサイズで埋め込むならCSSコード追加とクラス指定でよさそうだが、サイズが複数通りあるときは、都度CSSコードを追加することになり煩雑になりそう。
ということで、私にとっては改行(br /)追加がベストでした。

コメント