Как сделать картинку поверх видео html5?

Картинка над видео

Наложение png изображения с прозрачностью на видео html5 с помощью CSS.

Код HTML:

<!--Классическая верстка-->
<div class="parent-container">
<div class="img-container">
<img src="путь_до_файла/image.png" style="position: absolute; bottom: 0px; left: 0px;" width="80" height="98" />
</div>
<div class="border-container">
<div class="video-container">
<video autoplay loop muted style="width: 320px; height: 240px;">
<source id="mp4" src="путь_до_видео_файла/video.mp4" type="video/mp4">
<p>Ваш браузер не поддерживает HTML5 Видео</p>
</video>
</div>
</div>
</div>

<!--Верстка для Wordpress-->
<div class="parent-container">
<div class="img-container">
<img class="alignnone size-full wp-image-17501" style="position: absolute; bottom: 0px; left: 0px;" src="Путь_до_файла/gingerman-80-98.png" alt="" width="80" height="98" />
</div>
<div class="border-container">
<div class="video-container">
[video width="320" height="240" autoplay="autoplay" loop="loop" muted="" mp4="Путь_до_файла/video.mp4"][/video]
</div>
</div>
</div>

Код CSS:

  div.parent-container {
width: 320px;
height: 240px;
overflow: hidden;
position: relative;
left: 50%;
margin-left: -160px;
}

div.border-container {
height: 240px;
width: 320px;
-moz-border-radius: 40px;
border-radius: 40px;
overflow: hidden;
position: absolute;
bottom: 0px;
left: 0px;
-webkit-mask-image: url(/wp-content/uploads/2018/09/rect.svg); /* Изображение-маска дл скругления краёв видео*/
}

div.video-container {
width: 320px;
height: 240px;
position: absolute;
bottom: 0px;
left: 0px;
z-index: -10;
}

div.img-container {
width: 80px;
height: 98px;
overflow: hidden;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
}
Поделись, если оказалось полезно :)
Нет комментариев

Написать