0

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

1
  • данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) 7 янв 2022 в 20:39

2 ответа 2

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>

2
  • Спасибо за пример, очень помог. 4 янв 2022 в 11:59
  • @GhostGames, если мой ответ вам помог, отметьте его как правильный (галочка под оценками ответа).
    – De.Minov
    4 янв 2022 в 12:37
2

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>

1
  • @GhostGames Отредактировал ответ свой, добавил пример.
    – Pilaton
    25 дек 2021 в 20:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.