Как сделать закруглённые края на html5 видео?

24 Сен Как сделать закруглённые края на html5 видео?

Размещено в 19:27h in Без рубрики, Вёрстка html, css, Фронтенд by

Закругление краев на видео

Стандартные средство border-radius для закругления углов на видео, не работает, для этого можно использовать изображение svg в качестве маски для видео, которое будет закрывать края.
Выглядит вот так:
Код HTML:
<div class="parent-container">
  <div class="border-container">
    <div class="video-container">
	  <video style="width: 320px; height: 240px;" autoplay="autoplay" loop="loop" muted=""> 
        <source id="mp4" src="/wp-content/uploads/2018/09/video-dance.mp4" type="video/mp4" />
		  <p>Ваш браузер не поддерживает HTML5 Видео</p>
      </video>
	</div>
  </div>
</div>	  

<!--Для  WordPress будет так:-->
<div class="parent-container">
  <div class="border-container">
    <div class="video-container">
      [video width="320" height="240" autoplay="autoplay" loop="loop" muted="" mp4="путь_до_файла/video.mp4"][/video]
        Ваш браузер не поддерживает HTML5 Видео
    </div>
  </div>
</div>

Код CSS:

  div.parent-container {
    width: 320px;
    height: 240px;
    overflow: hidden;
    position: relative;
  }
  
  div.border-container {
    width: 320px;
    height: 240px;
    -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;
  }

Картинка-маска SVG под размер видео width: 320px, height: 240px.

Enjoy!

Поделись, если оказалось полезно :)
Tags:
,
Нет комментариев

Написать