すべてのカテゴリ

こんにちは、まっく‘＠Studio MKです。今回は、WordPressで動画を設置した際に起きた 「スマホで動画が白画面＋再生ボタンだけになる問題」と、その解決方法をまとめます。 ---  ■ 発生した問題 動画自体は正常に再生されるものの、 初期表示が以下のような状態になっていました。 * 白い背景 * 再生ボタンのみ表示 * サムネイル（動画の静止画）が出ない 👉 見た目としてかなり違和感があります ---  ■ 原因 使用していたのは 「メディアとテキスト」ブロック このブロックには以下の制約があります。 * 動画の「ポスター画像（サムネイル）」が設定できない * videoタグの細かい制御ができない 👉 つまり 初期表示をカスタマイズできない仕様-- ■ 最初に試した解決方法 カスタムHTMLで以下のように対応 ```html <video controls poster="サムネ画像URL">   <source src="動画URL" type="video/mp4"> </video> ``` 👉 これは正しい方法ですが… ---  ■ 問題点 * レイアウト調整が面倒 * ブロックエディタとの相性が悪い * 実務では修正しづらい ---  ■ 最終的な解決方法（おすすめ）  👉 2カラム構成に変更  左：動画ブロック  右：テキスト これにより👇 * 動画ブロックでポスター画像設定が可能 * レイアウトも自然 * WordPress標準で完結 ---  ■ 実装イメージ ```text [ 動画（サムネあり） ]　[ テキス