<div class="parent">
<div class="block_video">
<video src="https://zone.tw1.ru/video.mp4" muted autoplay loop></video>
</div>
<div class="block_svg">
<svg viewBox="0 0 480 270">
<rect width="100%" height="100%" fill="#000" mask="url(#mask)"></rect>
<text class="text_svg" y="40">
<tspan x="10">we're here</tspan>
<tspan x="375">to make</tspan>
</text>
<text class="text_svg" y="75">
<tspan x="10">healthy</tspan>
<tspan x="265">living effortless</tspan>
</text>
<text class="text_svg" y="110">
<tspan x="10">and happier</tspan>
</text>
<defs>
<mask id="mask">
<rect width="100%" height="100%" fill="#fff"></rect>
<path d="M150,20 365,20 365,45 150,45z M120,55 253,55 253,80 120,80z M165,90 480,90 480,117 165,115z" />
</mask>
</defs>
</svg>
</div>
</div>
.parent{
max-width: 100%;
margin: auto;
}
video{
display: block;
max-width: 100%;
}
.parent{
position: relative;;
}
video{
display: block;
width: inherit;
height: inherit;
}
.block_video{
clip-path: path();
}
.block_svg{
position: absolute;
top: 0;
left: 0;
width: 100%
}
.text_svg{
font-size: 20px;
fill: #fff;
font-weight: bold;
text-transform: uppercase;
font-family: sans-serif;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.