【解決】videoタグで動画を埋め込むと、Safariで見た時に微妙な感じになる…

WordPressで動画の埋め込みをしてSafariで確認してみると、画像のように再生ボタンだけが表示されて真っ白になってしまいました。
あまりかっこよくない上に、これだと動画が埋め込まれていることもわかり辛いのでなんとかしたいところです。

ざっと調べてみたところ、簡単な解決方法は以下の2つ。

解決方法①ポスター画像を設定する

Wordpressの場合、編集画面右のブロックの設定からポスター画像を設定できるようになっています。
ポスター画像を設定すると、それがサムネ画像として再生前のビデオ画面に表示されるようになります。

Wordpressでなくても、以下のようにposter属性で画像のパスを記述してやればポスター画像を設定することができますよ。

<video src="動画のパス" poster="画像のパス" controls></video>

ただ、この方法だとサムネ画像を用意しないといけないので、ちょっと面倒です。
もっと手軽にサクッと片づけたいなら次の解決方法②がおすすめ。

解決方法②#tを使う

<video src="動画のパス#t=0.001" controls></video>

動画パスの後ろに#t=0.001と付けましょう。
これだけで少なくとも真っ白状態ではなくなると思います。

#tという記述は、本来は再生範囲を指定するための記述です。
つまり、#t=0.001の場合には0.001秒経過した地点から再生スタートということになります。
こうすることで、再生前のビデオ画面には0.001秒地点での映像が表示されるようになるので、疑似的にサムネを付けたような状態にすることができました。

デフォルトでは動画の最初から再生するようになっているため、ゼロ地点での映像がない＝真っ白の状態になっています。