Контакты
  • evgenylebedevv@gmail.com
  • +7 960 255 15 53
  • L.E.V.rus
 

Как сделать картинку поверх видео 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;
  }  
Поделись, если оказалось полезно :)
Нет Комментариев

Написать комментарий