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 を直接書ける。