Видео видно через буквы SVG, сохраняя фиксированный фон и черное окружение. ⇐ Javascript

[Anonymous]

Я пытаюсь создать фиксированный фон видео, который будет виден только через пути SVG (буквы). Остальная часть вокруг SVG должна быть черной.
Однако, когда я исправляю видео, оно некорректно обрезается с SVG. Когда я использую clip-path или ForeignObject, видео перемещается в соответствии с настройками SVG.
html












Настройка CSS
.hero {
height: 100svh;
width: 100%;
position: relative;
background-color: var(--black);
overflow: hidden;
}

.letter-container {
height: 100%;
width: 120%;
position: relative;
z-index: 2;
mix-blend-mode: screen;
}

.letter-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}

.letter-wrapper svg {
width: 100%;
height: auto;
}

Настройка js
function initHorizontalScroll() {
gsap.registerPlugin(ScrollTrigger);

const letterContainer = document.querySelector(".letter-container");
const letterWrapper = document.querySelector(".letter-wrapper");

if (!letterContainer || !letterWrapper) return;

gsap.set(letterContainer, { x: 0 });

const containerWidth = letterContainer.scrollWidth;
const viewportWidth = window.innerWidth;

const scrollDistance = containerWidth - (viewportWidth / 3);

if (scrollDistance `+=${scrollDistance}`,
pin: true,
scrub: 1,
anticipatePin: 1,
invalidateOnRefresh: true,
}
});
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... lack-surro