Как сделать такой контур у блока

Question

Подскажите, как можно сделать такую рамку, у блока внутри блока будет проигрываться видео.

Answer 1

svg/png маску сделать можете поверх.
Пример, думаю будет понятен.

.container {
  position: relative;
  width: 450px;
}

video {
  width: 100%;
}

.mask {
  background: url(https://cdn.shopify.com/s/files/1/0124/4413/9610/files/city_night_haze-2_1080x.png) 50% 0 /contain no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="container">
  <video src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay muted></video>
  <div class="mask"></div>
</div>

Answer 2

Используйте mask.
В идеале перегнать картинку в SVG.

.video-mask {
  display: block;
  width: 100%;
  -webkit-mask: url('//i.imgur.com/DelAr8L.png') no-repeat center center / cover;
  mask: url('//i.imgur.com/DelAr8L.png') no-repeat center center / cover;
  padding-top: 64.48%;
  box-sizing: border-box;
  position: relative;
}

.video-mask > video {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

<div class="video-mask">
  <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4" autoplay muted controls></video>
</div>

БЛОГ НА HUSL

Как сделать такой контур у блока

Ответы (2 шт):