1

I would like to show a video in a HTML/CSS/JS prototype, no problem. Now the trick is that on the design, the video is shaped like a circle. Placing the controls will be a challenge but my question is; Is it posible to display a video shaped like a circle in HTML, CSS or JS?

Thanks in advance!

PS: support is not very important as it is for a prototype

SKuijers
  • 406
  • 7
  • 18

1 Answers1

1

This post attempts to answer the same question using CSS3 rounded corners. You will just need to make your radii half of the length & width to get a perfect circle:

rounded corners on html5 video

Community
  • 1
  • 1
Jonathan Vance
  • 434
  • 5
  • 22
  • If it was so simple I would not have asked the question. I can try to add this css to the video element but the video itself will not be reshaped. – SKuijers Jun 09 '12 at 15:20
  • I tried the solution at the above link and it works, I made a video shaped like a circle using this CSS mask and SVG file: -webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg) – Jonathan Vance Jun 12 '12 at 14:06
  • . . . exactly like the post says. – Jonathan Vance Jun 12 '12 at 14:07