【WordPress】動画ブロックのサイズ崩れを解消！「カスタムHTML」で完全解決（Cocoon対応）

WordPressで自作ツールのデモ動画を複数並べた「動くカタログページ」を作ろうとした際、標準の「動画ブロック」で以下のような挙動に悩まされました。

• PCで見ると動画が巨大化し、画面を圧迫する
• エディター側にサイズ調整機能がない。パディングや配置をいじると、テーマの仕様と競合してしまう。
• PCモニタでまずまず大きさの調整ができたとしても、スマホでの動画の画面サイズがおかしくなる。

CSSの強引な上書き（!important）すら無視してくるこの問題を、WordPressのシステムを一切介さない**「カスタムHTML＋子テーマCSS」**の組み合わせで100%綺麗に解決した方法を共有します。

---

1. 解決後のイメージ

• PCモニタ： 巨大化せず、指定したサイズ（例: 450px）で記事の中央に上品に配置される
• スマホ： 画面の横幅いっぱいにフィットしてしっかり動画を追える
• 仕様： GIF画像のように「自動再生・無限ループ・ミュート・コントロール非表示」を維持して超軽量

次のURLにこの方法で貼付けを行った動画ページを公開しています。是非確認してみてください。
EXCEL VBA (マクロ)で アニメーション をつくるロードマップ【基礎から応用まで一覧】

---

2. 実装手順

ステップ1：動画のURLを確保する

通常通りWordPressのメディアライブラリに動画（MP4等）をアップロードし、動画のファイルのURL（https://.../.mp4）をコピーして控えておきます。

ステップ2：「カスタムHTML」ブロックを配置する

標準の動画ブロックは使わず、**「カスタムHTML」**ブロックを配置し、以下のコードを貼り付けます。

<div class="vba-video-box">
    <video src="【ここにコピーした動画のURL】" autoplay muted loop playsinline></video>
</div>

※ playsinline を入れることで、iPhone等のスマホで動画が勝手に全画面プレイヤーで起動するのを防ぎます。

ステップ3：WordPress上で「グループ化」して中央揃え

カスタムHTMLブロックをそのまま配置するだけだと、テーマの仕様でPC版の中央配置が効かないケースがあります。
WordPressのエディター上で、配置したカスタムHTMLブロックを**「グループ化」し、そのグループの配置設定を「中央揃え」**に設定します。

ステップ4：子テーマの style.css にコードを追記

お使いのテーマ（今回はCocoonを使用）の子テーマの style.css（または外観＞カスタマイズ＞追加CSS）の最下部に、以下のコードを追記します。

/* ==========================================
 * カスタムHTML方式：動画サイズ・配置最適化
 * ========================================== */
.vba-video-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important; /* 親グループ内での中央配置を担保 */
}

.vba-video-box video {
    width: 100% !important;         /* スマホでは画面横幅いっぱいに広げる */
    max-width: 450px !important;    /* PCでは450px（お好みのサイズ）に制限 */
    height: auto !important;
    display: block !important;      /* 謎の隙間を排除して中央に寄せる */
    margin: 0 auto !important;      /* 動画自体を確実に中央揃え */
    background: transparent !important; /* プレイヤーの黒い背景を透明化して白背景に同化 */
}

3. なぜこれで解決するのか？（技術的背景）

WordPressの「動画ブロック」は、裏側で画面サイズに応じた複雑なサイズ計算スクリプトが動いており、これがテーマ（特にCocoonなどの高機能テーマ）のレスポンシブ仕様や、過去にエディター側で設定したパディング・マージンのキャッシュと喧嘩してバグを引き起こします。

今回の「カスタムHTML方式」は、そういったWordPressの仲介システムを100%バイパスし、生のHTML5 video タグをダイレクトにブラウザに解釈させる手法です。

余計なラッパー要素を一切排除し、ピュアなCSSで max-width と margin: 0 auto を制御しているため、ブラウザの仕様に忠実に、PC/スマホそれぞれで狙い通りの表示が実現できます。

同じ現象で、はまっている方の参考になれば幸いです！