SGDGS_B1B0U6

とりあえずPC以外のメディアからのアクセスは考慮しておりませぬ。

coding┃メインビジュアルの背景に動画+ドットフィルタ

最初はここを見ながら組んでみた。

moshashugyo.com

  

ただ、動画に対してドットフィルタも導入することになり、調べ直したところこちらの方が記述がシンプルだった。

pulpxstyle.com

 

ところが、どうしてもクライアントのiPhoneも含めたスマホで動画が再生されない事象が発生。(静止画のまま。iPhone12 mini、iPhoneSE 第2世代、iPhoneSE 第1世代で確認。検証ツールでは正常動作)

いろいろ検索してコードを見比べていった結果、こちらのコードに一つだけ追加記述があったのを発見。

coco-factory.jp

結論

<video>タグに「webkit-playsinline」が必要だった。

※ただ、iPhoneSE 第1世代は機種が古すぎて、検索した全てのサンプルサイトにおいても動画の自動再生はできなかったので、これはもう諦めることにする。