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

Как правильно сверстать такое видео, чтобы был 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>
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 2
@petruncho Автор вопроса
Блок с видео, напрямую не получилось загрузить картинку
https://ilya-petrov.ru/cdn/video-block.png
Ответ написан
Wacdis
@Wacdis
Web Development fan
Частичная поддержка свойста 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.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы