<div class="video-block">
  <svg class="video-block__svg">
    <text x="60%" y="30%" class="Rrrrr">Сердит!</text>
    <defs>
      <clipPath id="video-block__clip">
        <circle class="video-block__clip-circle" cx="60%" cy="30%" r="40%"/>
      </clipPath>
      <linearGradient id="video-block__grad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
    </defs>
    
    <circle class="video-block__circle" cx="60%" cy="30%" r="41%" fill="none" stroke="url(#video-block__grad)"/>
  </svg>
  <video class="video-block__video" autoplay playsinline muted loop preload poster="https://thenewcode.com/assets/images/vid-glacier.jpg" playsinline>
    <source src="https://thenewcode.com/assets/videos/glacier.mp4" type="video/mp4">
    <source src="https://thenewcode.com/assets/videos/glacier.webm" type="video/webm">
  </video>
</div>

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: sans-serif;
  min-height: 100vh;
  height: 1px;
}

.video-block {
  position: relative;
  width: 100%;
  margin: 0px auto 0;
}

.video-block__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-block__circle {
  stroke-width: 2px;
  stroke-dasharray: 10px;
}

.video-block__video {
  display: block;
  width: 100%;
  clip-path: url('#video-block__clip');
}