サイト制作ではまったので備忘録としてメモしておきます。
videoタグで背景動画を作り、autplay属性をつけて自動再生にし、文字をposition: absolute;で浮かしてキービジュアルを作成していた時のこと…
ディレクターさんの確認も終わり先方確認に出したら一部のiphoneで再生ボタンが表示されてしまう不具合が発生。
わたしの手元のiphoneでも、ディレクターさんのiphoneでも再現せず、バージョンもばらばら…
なぜ？となりました。
結論：iphoneの省エネモードが原因
autplay属性をつけていても、iphoneの省エネモードだと自動再生されず、再生ボタンが表示されてしまうよう。
下記の記事が詳細に原因書いてくれているので参考に。
https://zenn.dev/rik9228/scraps/6972c4a1c5077a
今後背景系の動画で自動再生させる場合は、autoplay属性でなく、ページ読み込み語にjsの.play()を使用して対応することになりました。
みんなも気を付けてね！