Search code examples
htmlcsssvgvideomask

Mask Video SVG shapes

I'd like to insert a video to a shape SVG.

The shape looks like this :Shape I exported them to .svg

I tried use mask CSS and create the shape with CSS to use overflow: hidden but nothing.

I need your help please ! Thanks

Solution

  • You can use clip-path - CSS: and as a plus object-fit

    The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

    just apply it to the video without using svg. 

    video {
    object-fit: cover;
    clip-path: url(resources.svg#c1);
}

    Here is a demo 

    *{
  box-sizing: border-box;
  padding: 0;
  margin: 0
}
figure{
  width: 100vw;
  height: 400px;
  position: relative;
  background-color: red; 
  overflow: hidden
}
video{
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 88% 63%, 58% 94%, 46% 94%, 13% 63%, 0 0);
}
figcaption{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 28vh;
  font-size: 3vw;
  font-weight: 900;
  text-transform: uppercase;
  z-index: 2;
}
 
    <figure>
  <video controls controls autoplay preload="metadata" buffered loop>
 

      <source src="https://www.w3schools.com/html/mov_bbb.mp4"
              type="video/mp4">

      Sorry, your browser doesn't support embedded videos.
  </video>
  <figcaption>My Nice video</figcaption>
</figure>