【WordPress】動画が白画面になる原因と解決法（ポスター画像設定の落とし穴）

こんにちは、まっく‘＠Studio MKです。

今回は、WordPressで動画を設置した際に起きた

「スマホで動画が白画面＋再生ボタンだけになる問題」と、

その解決方法をまとめます。

---

 ■ 発生した問題

動画自体は正常に再生されるものの、

初期表示が以下のような状態になっていました。

* 白い背景

* 再生ボタンのみ表示

* サムネイル（動画の静止画）が出ない

👉 見た目としてかなり違和感があります

---

 ■ 原因

使用していたのは

「メディアとテキスト」ブロック

このブロックには以下の制約があります。

* 動画の「ポスター画像（サムネイル）」が設定できない

* videoタグの細かい制御ができない

👉 つまり

初期表示をカスタマイズできない仕様

--

 ■ 最初に試した解決方法

カスタムHTMLで以下のように対応

```html

<video controls poster="サムネ画像URL">

  <source src="動画URL" type="video/mp4">

</video>

```

👉 これは正しい方法ですが…

---

 ■ 問題点

* レイアウト調整が面倒

* ブロックエディタとの相性が悪い

* 実務では修正しづらい

---

 ■ 最終的な解決方法（おすすめ）

 👉 2カラム構成に変更

 左：動画ブロック

 右：テキスト

これにより👇

* 動画ブロックでポスター画像設定が可能

* レイアウトも自然

* WordPress標準で完結

---

 ■ 実装イメージ

```text

[ 動画（サムネあり） ]　[ テキスト ]

```

👉 シンプルですがこれが一番安定します

---

 ■ さらに見た目を良くするコツ

CSSで少し装飾するだけで印象が変わります。

```css

video {

  border-radius: 10px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}

```

👉 これだけで一気に「それっぽく」なります

---

 ■ 学び

今回のポイントはこれです。

* ブロックでできないことは無理にやらない

* 別の方法で解決する柔軟さが大事

* 「正解」より「解決」

---

 ■ まとめ

* 白画面の原因 → ポスター未設定

* メディアとテキストでは設定不可

* 2カラム＋動画ブロックで解決

---

 ■ 最後に

WordPressは便利ですが、

「できること・できないこと」がブロックごとに違います。

今回のように、

👉 別の構成に切り替えて解決する力

があると、実務でもかなり強いです。

同じような症状で困っている方の参考になれば嬉しいです。