Не отображается маска видео на apple

Question

Помогите пожалуйста, у меня есть два фоновых видео, однако на iphone проигрывается только одно,background-video, а видео маски не проигрывается, почему это может быть? Пробовала ставить разные типы видео, ничего не получается. В инспекторе все нормально, но на телефоне маска просто не показывается, так же как и постер

<!DOCTYPE html>
<html>
<head>
<style>

.hero_block svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 1500px;
  margin: auto;
}

#svg-mask {
    clip-path: url(#svg-path);
    position:absolute;
    z-index:10;
    filter: brightness(200%) saturate(100%);
    margin-top:60px;
  width:100%;
}
#svg-path {
  transform-origin: center;
  transition: all  1s ease;
  transform: translate(55%, 10%);
}
#background-video{
    filter: brightness(30%);
margin-top:-530px;
    width: 100vw;
    height: 107vh;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
</style>
    </head>
    <body>
      <div class="hero_block">
        <video id="svg-mask" autoplay loop muted playsinline preload="auto" poster="./rectangle.png">
                <source src="./holm.mp4" type="video/mp4">
            </video>

        
       <svg width="870" height="230" viewBox="0 0 870 230" fill="none" xmlns="http://www.w3.org/2000/svg">
<clipPath id="svg-path"><path d="M3 224.019V5.98099H49.1177V95.943H142.738V5.98099H188.749V224.019H142.738V133.951H49.1177V224.019H3ZM427.219 115C427.219 138.777 422.71 159.005 413.693 175.684C404.746 192.364 392.533 205.104 377.054 213.905C361.646 222.635 344.321 227 325.078 227C305.694 227 288.298 222.599 272.89 213.798C257.482 204.997 245.304 192.257 236.358 175.578C227.411 158.899 222.938 138.706 222.938 115C222.938 91.2231 227.411 70.9949 236.358 54.3156C245.304 37.6362 257.482 24.9316 272.89 16.2015C288.298 7.40051 305.694 3 325.078 3C344.321 3 361.646 7.40051 377.054 16.2015C392.533 24.9316 404.746 37.6362 413.693 54.3156C422.71 70.9949 427.219 91.2231 427.219 115ZM380.462 115C380.462 99.5982 378.155 86.6096 373.539 76.0342C368.995 65.4588 362.569 57.4385 354.261 51.9734C345.954 46.5082 336.226 43.7757 325.078 43.7757C313.931 43.7757 304.203 46.5082 295.895 51.9734C287.588 57.4385 281.126 65.4588 276.511 76.0342C271.967 86.6096 269.695 99.5982 269.695 115C269.695 130.402 271.967 143.39 276.511 153.966C281.126 164.541 287.588 172.561 295.895 178.027C304.203 183.492 313.931 186.224 325.078 186.224C336.226 186.224 345.954 183.492 354.261 178.027C362.569 172.561 368.995 164.541 373.539 153.966C378.155 143.39 380.462 130.402 380.462 115ZM461.381 224.019V5.98099H507.499V186.011H601.013V224.019H461.381ZM631.554 5.98099H688.429L748.499 152.475H751.055L811.125 5.98099H868V224.019H823.267V82.1027H821.456L765.007 222.954H734.546L678.097 81.5703H676.287V224.019H631.554V5.98099Z" fill="black"/>
</clipPath>
</svg>

        <video id="background-video" autoplay loop muted playsinline poster="./rectangle.png">
            <source src="./holm.mp4" type="video/mp4"><source src="./holm.mp4" type="video/mp4"> <source src="./holm.webm" type="video/webm"></video>
</div>
      </body>
   </html>

БЛОГ НА HUSL

Не отображается маска видео на apple

Ответы (0 шт):