Так что я искал ответ вокруг и не повезло ... вот и я! Я использовал html5 элемент видео в качестве фона, и он отлично работал в Интернете и на мобильных устройствах ... до недавнего времени. Я попытался добавить все атрибуты для совместимости, и я почти уверен, что CSS в порядке, но я включу оба здесь для справки.
HTML
<video playsinline muted autoplay loop poster="/media/images/still.png">
<source src="/media/videos/backgrounds/strawberry.mp4" type="video/mp4">
<source src="/media/videos/backgrounds/strawberry.webm" type="video/webm">
<source src="/media/videos/backgrounds/strawberry.ogv" type="video/ogg">
</video>
CSS
video {
display: block;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 60vh;
opacity: 0.9;
z-index: -100;
}
Единственное, что я помню, менялось в последнее время, это видео форматы. Раньше он был только .m4v, но конвертировал их в то, что вы видите сейчас, для облегчения потоковой передачи. Вы можете проверить веб-сайт по номеру http://www.soft-riders.com на своем мобильном телефоне, чтобы проверить. Любая помощь приветствуется!