Clipping video to circle container with hidden overflow


(Leo) #1

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

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


(Mark Hunte) #2

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>


(Leo) #3

thanks again, problem solved


(Jonathan Deutsch) #4

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

(Mark Hunte) #5

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…


(Mark Hunte) #6

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…