動画を自動再生させたい

videoタグでの埋め込みの場合、以下のように設定します。

<video src="/img/video.mp4" poster="/img/video_poster.png" autoplay="" loop="" muted="" playsinline></video>

ポイントは、videoタグに次の属性を入れることです。

動画の読み込みを早くしたい

調べたところ、YouTubeの埋め込みで四苦八苦されている記事を発見。
YouTube埋め込みだと、

という理由で、videoタグの方を採用しました。

「どーーーーーしても、YouTubeを埋め込みしないとダメなんだ！」
という場合は、こちらのサイト様が参考になると思います。
→埋め込みyoutubeが想像以上に戦犯級だった件｜ma-ya’s CREATE

とにかく読み込むデータを軽くする！！！
サイト制作において、これは避けては通れません。。。
最低限、以下のことはしておきたいです。

posterを設定すると、
動画の読み込みが完了するまで、設定した画像を表示させておきます。
これがないと、動画の読み込みが完了するまで、何も表示されません。
（設定の仕方は上のコードを参照。）

videoタグの属性にpreloadがありますが、
自分的にはあまり効果がなかったと思います。

「動画が最初の方、静止画になっている」
とお客様からご指摘があったのですが、
これは、動画の読み込みに時間がかかっているので、
その間、posterの画像が表示されているのが原因です。

「ページ全体の読み込みを軽くする」のが大前提ですが、
トップページは特に、画像もJavaScriptも使って派手にするので、
どーーーしても重くなりがちです。

ごまかしになってしまいますが、
最初にローディングアニメーションを入れることで、
アニメーション終了後、おおよその要素が読み込み終わっているので、
有効な手段の一つと思っています。

ただ、ローディングアニメーション終了後、
動画はすでに自動再生が始まっているので、
最初から再生はされないです。。。
そんなの気にしない場合にご使用ください。