Connect-CMS Tips

スマホで動画を埋め込んだときに「サムネイル画像（1枚目の静止画）」が表示されず、再生ボタンだけになる現象はよくあります。
原因はいくつかありますが、ほとんどの場合は “poster画像を指定していない” ことが理由です。

 poster 属性をつけるとサムネイルが表示されます

HTML の タグに poster 属性 を追加すると、スマホでも確実に画像が表示されます。

poster="thumbnail.jpg"　→ 再生前に表示したい画像を指定します
これを入れないと、スマホ（特に iPhone / Safari）は「再生ボタンだけの黒い画面」 を出すことがあります。 

 iPhone（Safari）で1フレーム目が出ない理由

・iPhone の Safari は、自動で動画の1フレーム目をサムネイルにしない
・poster がない場合は再生ボタンだけを表示する
という仕様になっています。そのため、poster を指定するのが唯一確実な方法です。

 「1枚目のフレームをサムネイルにしたい」場合

動画編集ソフトやオンラインツールで1フレーム目を画像として書き出して、それを poster に指定します。

Connect‑CMS では「詳細設定」でポスター画像を登録
Connect‑CMS の動画アップロード画面には次の3つがあります：
・メディアアップロード（動画ファイルをアップする）
・埋め込み（YouTube などのコードを入れる）
・ 詳細設定 → ポスター画像を登録 ← ここが重要！ マニュアルに「動画の場合のポスター画像を登録する画面です」と書かれているので、 ここでサムネイル画像を指定すれば、スマホでも画像が表示されるようになります。

 Connect‑CMS でも、 ポスター画像を設定しないとスマホでは画像が出ません。

1フレーム目をサムネイルにする「簡便な方法」動画URLに #t=0.1 を付ける

HTML の <video>タグで、動画の URL の末尾に #t=0.1  を付けると、
動画の最初のフレームをサムネイルとして表示できます。
（0秒だと動作しないブラウザがあるため 0.1 秒が推奨）

これは HTML の一般的なテクニックで、
poster 画像を用意しなくても “1フレーム目を自動でサムネイル化” できます。
• Connect‑CMS の「埋め込み」機能で HTML を直接書ける。

HTML
<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL①" alt="画像1の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文①が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL②" alt="画像2の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文②が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL③" alt="画像3の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文③が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL④" alt="画像4の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文④が入ります。</p>
</div>
</div>