<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.