Skip to content

Latest commit

 

History

History
39 lines (32 loc) · 2.53 KB

how-do-you-make-a-html5-video-into-a-circle.md

File metadata and controls

39 lines (32 loc) · 2.53 KB
Raw
title authors intro types categories published updated status
How do you make a HTML5 video into a circle
thebeebs
Following a visitors request last week I showed yo...
shorts
web
html5at5
2011/12/19 12:00:00
2011/12/19 13:00:00
archived

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;
}

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.