Clipping video to circle container with hidden overflow

Hi, any ideas on clipping (masking) a video into a circle ?

I am currently using groups/symbols to clip content into rectangles

You can place the video inline in the innerHTML of an element. Us its overflow and add some css styling to the head.
The styles are used to position the video.

Element innerHTML


 <video id="vid" autoplay="">
      <source src="${resourcesFolderName}/Shakira.mp4" type="video/mp4">
     
    </video>

Head Styles

<style>	
#vid {
   
   position: relative!important;
   height:340px !important;
   top: -20px !important;
left: -150px !important;
    display: block !important;
    
}
</style>

1 Like

thanks again, problem solved

Another method within Hype would be:

  1. Embed the video in a group
  2. Set the group’s content overflow to hidden (via Metrics Inspector)
  3. Add a very large border radius (say 1000px) via the Element Inspector
  4. Resize the group bounds to be square (and thus making a circle) and adjust the video position inside the group as need be
4 Likes

Bloody hell, Much simpler, I did not think the Groups picked up radius as I am sure I tried that before.

But works great (now !!)

You do not seem to need to have to add a border…

2 Likes

Just realised why the Radius trick on groups did not work for me before. They did but you have to set the overflow to hidden before you see the change. I clearly did not do that first so assumed it was not working…