動画最盛期の今、トップページや背景などに動画を使う機会は多いと思います。
ところがvideoタグを使って動画を埋め込んだところ、ある問題に直面しました。

せっかくトップページに大きく動画を持ってきてインパクトのあるサイトにしたいのに、
いちいち再生ボタンを押さないといけないなんて、ちょっとかっこ悪いですよね・・・。

結論から言って、この解決方法はすごく簡単でした。
覚えておくと便利かと思いますので、シェアさせていただきます。

結論：”muted”と”playsinline”をつけるだけ

これだけです。
どうやらChromeでは、「音声オフ」という条件下の元でしか自動再生が効かないようなのです。
autoplayとmutedはセットで、と覚えておくと安心ですね。

さらにiPhoneで自動再生させたい場合は、”playsinline”という属性をつける必要があります。
これを記述することでブラウザ内でのインライン再生が可能となるようです。

・・・という理屈で覚えるよりも、↓このコードをメモしておくと楽だと思います。

なお、ループせずに1度だけ再生させたい場合は”loop”属性を取りましょう。
再生ボタン、一時停止ボタンなどのインターフェースを表示したい場合は”controls”属性を記述すればOKです。

おまけ：”filter”プロパティがすごく便利

filterプロパティを使うと、動画編集ソフトを使わなくとも動画を加工することができます。

①元の動画

②filter:opacity(0.6);

動画の不透明度を変えられます。これは黒背景なので黒っぽいフィルターがかかったように見えます。

③filter:sepia(1);

()内の数字で、セピアの強さを調整できます。

④filter:contrast(1.5) brightness(1);

コントラストや明度を調整できます。

⑤filter:blur(10px);

ぼかしをかけられます。

例えばhoverとtransitionを組み合わせて、モノクロの動画にマウスオーバーしたら徐々にカラーになる、などのエフェクトも加えられます。
もちろん動画だけでなく画像にも使えるので、色々試してみて下さい。