Как правильно сверстать такое видео?

Question

[Илья Петров]

Как правильно сверстать такое видео, чтобы был autoplay, именно через ?
Пробовал добавлять clip-path, он не поддерживается Safari.
Делать маску из всех элементов и накладывать поверх тоже не очень, тяжело адаптировать.

clip-path, кому интересно

<svg class="promoVideo__mask">
   <clipPath id="video-mask" clipPathUnits="objectBoundingBox">
      <path d="M1,0.496 v0.008 C0.998,0.778,0.798,1,0.553,1 C0.361,1,0,0.863,0,0.675 c0,-0.055,0.031,-0.114,0.105,-0.175 c0.159,-0.13,0.211,-0.251,0.25,-0.341 C0.398,0.062,0.425,0,0.553,0 C0.798,0,0.998,0.222,1,0.496"></path>
   </clipPath>
</svg>

Answer 1

[Илья Петров]

Блок с видео, напрямую не получилось загрузить картинку
https://ilya-petrov.ru/cdn/video-block.png

Comments

[Ross Alex]

всмысле? через poster или как-то по другому?!

Answer 2

[Ross Alex]

Частичная поддержка свойста clip-path через префикс у Safari Can I Use. И попробуйте засунуть path в свойство не через ссылку на #video_mask.

clip-path: path('M1,0.496 v0.008 C0.998,0.778,0.798,1,0.553,1 C0.361,1,0,0.863,0,0.675 c0,-0.055,0.031,-0.114,0.105,-0.175 c0.159,-0.13,0.211,-0.251,0.25,-0.341 C0.398,0.062,0.425,0,0.553,0 C0.798,0,0.998,0.222,1,0.496 Z');

Также, применяйте к блоку, в котором видео, а не к тегу video.

Comments

[Илья Петров]

Напрямую path прописывать не получается, нужно через polygon, а там другой формат

[Ross Alex]

Илья Петров, --webkit-clip-path пробуй с url()

[Илья Петров]

Yaroslav O., работает везде, кроме Safari
Safari в приоритет