How do you make a HTML5 video into a circle

Following a visitors request last week I showed you how to produce a triangle shaped HTML5 video, pretty useless but interesting none the less. A number of people on twitter asked if it was possible to make a circle video. No problem I thought… Just apply border-radius to the element. If you add a border radius to an element with a size of 50% of the width and height. Then you will get a circle shape.

Now I thought that the following code would work every where but it only works in IE and FF. For some reason Chrome doesn't like it and Opera doesn't apply border-radius to the contained element as I expected it to.

.container {
    border-radius: 120px 120px 120px 120px;
<div class="container">
     <video width="416" controls autoplay >
         <source src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
         <source src="" type='video/ogg; codecs="theora, vorbis"' >

To get it working in Opera I needed to remove the nesting and apply the border-radius directly to the video element.

Chrome seemed to just ignore the border-radius on the video element. If I'm doing something wrong please let me know and I will fix it, but it seems right to me.

In conclusion I was unable to get a circle video working in all major browsers.

Comments (0)

Skip to main content