サイトの背景に動画を使ったらスマホで全画面になっちゃった人へ

　Reactで個人サイトを作り、開発者モードで見ても問題なさそうだし、いざデプロイしてiPhoneから見てみると動画が再生されないかったり、リロードとか別ページから戻ると再生はされるけど強制的に全画面になり、戻ればコントロール画面のオーバーレイが。
　調べたらからりしょうもないミスというかattributeの存在忘れで、ReactじゃなくてもHTML+CSSでもやらかしそうだなと思い、日本語の情報がなかったので備忘録。

結論: PlaysInLineをつける

Before:

<video autoPlay loop muted className="home-video">
    <source src={hoge} type="video/mp4" />
</video>

After:

<video autoPlay loop muted playsInline className="home-video">
    <source src={hoge} type="video/mp4" />
</video>

　たったこれだけ。表記はReactのものですがHTMLでやってる人もこれでいけると思います、多分。
　Reactライブラリでnative videoだとかbackground videoだとか色々調べて試したりしたんですけど、もともとvideoとsourceタグだけでできてたのをわざわざコンポーネントに置き換えるのだるいなと思いながら調べてたら気づきました。Reactだけに頼らずHTMLのことも忘れないでねってことかな、はい。