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 {
    width:240px;
    height:240px;
    overflow:hidden;
    border-radius: 120px 120px 120px 120px;
}
<div class="container">
     <video width="416" controls autoplay >
         <source src="http://www.archive.org/download/BathToyLakeHaweaWaves/hawea_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
         <source src="http://www.archive.org/download/BathToyLakeHaweaWaves/hawea.ogv" type='video/ogg; codecs="theora, vorbis"' >
     </video>
</div>

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

http://jsfiddle.net/thebeebs/KWcDB/11/

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