WPのサイトに動画を設置 スマホで動画のサムネイルが表示されないときの対処法

富士市が街のPR動画を制作したので見てみた結果 静岡県のホームページ制作・WEB制作

WPのサイトに動画をアップしました。

パソコンで見ると動画のサムネイルが表示されます。ところがスマホで見ると、動画のサムネイルが表示されないのです。

サムネイルが表示してほしい場所は再生ボタンだけが表示されてしまう状態に・・・。

再生ボタンを押すと動画を再生することはできるのですが、それではちょっとカッコ悪い・・・。

ちなみにそのときに使用したタグは以下のものです。

<video controls controlslist=”nodownload” oncontextmenu=”return false;” src=”動画のURL”></video>

 

これでは上記のような現象が発生してしまいます。

そのため上記のタグを以下のようにすることで、スマホでもサムネイル表示がされるようになります。

<video controls controlslist=”nodownload” oncontextmenu=”return false;” poster=”サムネイル画像のURL” src=”動画のURL”></video>

 

何をしているのかというと、サムネイルとなる画像を別に作成し、上に被せているという状態になるようです。

これでうまくいきました。

この記事を書いた人
tomo

サイト制作、SEOに20年以上携わる。その知識や技術を活かしさまざまな企業のWEBマーケティングにコンサルタントとして携わり実績を出している。
WEBマーケティングに関する大学での授業やウェビナーでの登壇、さらには国際学会での発表を行っている。
ホワイトな施策を中心とし、安全に、そして確実にクライアントの数字を上げる施策を心掛け、高い成功実績を残している。

tomoをフォローする
静岡県のホームページ制作・WEB制作
シェアする
タイトルとURLをコピーしました