title | authors | intro | types | categories | published | updated | status | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
How do you make a HTML5 video into a circle |
|
Following a visitors request last week I showed yo... |
|
|
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.