Подскажите, как можно сделать такую рамку, у блока внутри блока будет проигрываться видео.
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>
-
-
@GhostGames, если мой ответ вам помог, отметьте его как правильный (галочка под оценками ответа).– De.MinovCommented 4 янв. 2022 в 12:37
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>