Вёрстка синхронного видео в вырезанных блоках: пошаговое руководство

Задача сверстать блок, где одно видео воспроизводится синхронно в нескольких вырезанных областях, может показаться сложной. Однако современные CSS-техники, такие как clip-path, mask и SVG, позволяют реализовать этот эффект без использования JavaScript. В этой статье мы подробно разберём, как создать адаптивный блок с синхронным видео, где линии движения выглядят как единый поток.

Основная идея: одно видео - много масок

Ключевой принцип - использовать одно фоновое видео, на которое накладываются маски или обтравочные контуры. Видео играет один раз, а каждый блок показывает только свою часть через вырезанную область. Это обеспечивает идеальную синхронизацию.

Способ 1: Использование clip-path

Свойство clip-path позволяет обрезать элемент по заданному пути. Вы можете создать несколько контейнеров, каждый из которых будет содержать одно и то же видео, но с разными clip-path.

Пример реализации:

<div class='video-clip' style='clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);'>
  <video autoplay loop muted>
    <source src='video.mp4' type='video/mp4'>
  </video>
</div>
<div class='video-clip' style='clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);'>
  <video autoplay loop muted>
    <source src='video.mp4' type='video/mp4'>
  </video>
</div>

Недостаток: видео загружается несколько раз, что увеличивает нагрузку. Чтобы избежать этого, используйте mask.

Способ 2: Маски (CSS mask)

Техника с mask позволяет наложить маску на элемент, скрывая части видео. Вы создаёте один элемент с видео, а маску задаёте через SVG или градиент.

Шаги:

• Создайте контейнер с видео, которое будет фоном.
• Определите маску с помощью mask-image или mask.
• Используйте несколько масок для разных блоков, комбинируя их через mask-composite.

Пример маски через SVG:

<svg>
  <defs>
    <mask id='mask1'>
      <rect width='100%' height='100%' fill='white' />
      <circle cx='50%' cy='50%' r='30%' fill='black' />
    </mask>
  </defs>
</svg>
<div style='mask: url(#mask1);'>
  <video ...></video>
</div>

Способ 3: SVG с foreignObject

SVG-элемент foreignObject позволяет встраивать HTML внутрь SVG. Вы можете создать SVG-контейнер, в котором разместите видео, а затем обрезать его с помощью SVG-путей.

Пример:

<svg viewBox='0 0 800 600'>
  <clipPath id='clip1'>
    <polygon points='0,0 200,0 200,600 0,600' />
  </clipPath>
  <foreignObject clip-path='url(#clip1)' width='800' height='600'>
    <video autoplay loop muted style='width:800px;height:600px;'>
      <source src='video.mp4' type='video/mp4'>
    </video>
  </foreignObject>
</svg>

Этот метод даёт полный контроль над формой вырезанных блоков и отлично работает в современных браузерах.

Адаптивность

Для адаптивности используйте относительные единицы (%, vw, vh) в координатах clip-path и масок. Также можно применять медиа-запросы для изменения формы вырезанных областей на мобильных устройствах.

Заключение

Вёрстка синхронного видео в вырезанных блоках - это комбинация CSS и SVG. Выберите метод в зависимости от сложности формы: для простых геометрических фигур подойдёт clip-path, для сложных - SVG-маски. Главное - использовать одно видео, чтобы обеспечить синхронность.