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 that you have read and understand our privacy policy and code of conduct.

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