Как сделать видео с автозапуском без звука

Короткий ответ

Добавьте autoplay вместе с muted, а loop зациклит ролик:

<video src="/media/flower.webm" autoplay muted loop playsinline width="320"></video>

playsinline нужен для iPhone: без него видео при запуске раскрывается на весь экран.

Видео на фоне блока

Видео растягивают на весь блок через object-fit: cover, а текст кладут поверх:

<style>
  .hero { position: relative; isolation: isolate; display: grid; place-items: center; height: 200px; overflow: hidden; color: white; font-size: 28px; }
  .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
</style>
 
<div class="hero">
  <video src="/media/flower.webm" autoplay muted loop playsinline></video>
  Spring is here
</div>

Уважайте настройки пользователя

Движение на экране мешает некоторым людям. Если в системе включено «уменьшить движение», лучше показывать неподвижную обложку (poster) — проверить это можно медиазапросом prefers-reduced-motion. И дайте возможность остановить видео, например оставив controls.

Частая ошибка

Пишут только autoplay и удивляются, что видео стоит на месте. Браузеры запрещают автоматически запускать ролики со звуком, пока пользователь ничего не нажал на странице. Без muted автозапуск просто не срабатывает:

<video src="/media/flower.webm" autoplay loop width="320"></video>