5

I've seen this question pop up a couple of times without any clear resolution.

I'm loading a simple video

<video src="" controls></video>

Onto my page. The video works and plays well cross-browser (not showing all the format setup for this question since it isn't relevant).

I've then applied a border-radius to the video tag. This works, except in Chrome. I can even pull up the console and see the border-radius applied to the video tag, but it isn't rendering the border radius.

Is anyone familiar with this issue? I've read it's a bug in Chrome, but I'm not sure if it's been resolved or if there might be a workaround?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Aaron
  • 2,482
  • 1
  • 26
  • 56
  • possible duplicate of [rounded corners on html5 video](http://stackoverflow.com/questions/6238451/rounded-corners-on-html5-video) – tckmn May 07 '13 at 01:18
  • Yes, as I stated in the question: I've seen this question pop up a couple of times without any clear resolution. And the link you referenced is over a year old with the solution being a browser bug. I'm specifically asking if anyone knows if it has been resolved. – Aaron May 07 '13 at 01:33
  • Then add a bounty to one of the duplicates, stating that you want to know if it has been resolved. – tckmn May 07 '13 at 01:37
  • Does your video need to be responsive? If not, and if you don't need the video to be clickable (buttons etc) you could overlay it with a transparent image. But that's a lot of ifs. Another option is to add some padding to the video, with a nice background color, and round it off that way. Creates a nice looking frame. – ralph.m May 07 '13 at 01:37
  • Thanks,yeah I'll need to have controls and interaction with the video so the overlay wouldn't work. I've seen the padding trick, which seemed kind of lame when I first saw it, but is not looking more appealing. Too bad Chrome seems to have known about this issue for a long time know. – Aaron May 07 '13 at 01:45

1 Answers1

6

I'm not sure but I think that this is what's meant by "using SVG":

The idea is to create a HTML overlay element that is the same width and height as the video, set multiple SVG backgrounds on it (border-radius's in whatever the background color is) and make it "mouse-invisible" (pointer-events: none):

Demo: http://jsfiddle.net/pe3QS/3/

CSS (minus the SVG's): 

#video-container {
    position: relative;
}

#overlay {
    position: absolute;
    width: 320px;
    height: 240px;
    left: 0;
    top: 0;
    pointer-events: none;
    background-image: url('data:image/svg+xml...');
    background-position: top right, top left, bottom left, bottom right;
    background-repeat: no-repeat;
}

HTML: 

<div id="video-container">
    <video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
    <div id="overlay"></div>
</div>

You could also use a psuedo-element (not on the video element, it would'nt display):

Demo: http://jsfiddle.net/pe3QS/2/

CSS: 

#video-container:after {
    position: absolute;
    width: 320px;
    height: 240px;
    content: " ";
.....

HTML: 

<div id="video-container">
    <video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>

The SVG's are pretty simple to modify, just change the fill attribute on each of them.

This could probably also be done via JS.

A.M.K
  • 16,727
  • 4
  • 32
  • 64
  • Thanks for the detailed answer. The fiddles aren't working properly though and just show the video. SVG wasn't required at all, but one of the possible solutions someone recommended on a question I read elsewhere. It seems that IE9/10 and Firefox can handle a simple border radius on a video tag, but others fail to render it correctly. – Aaron May 09 '13 at 21:10
  • I'm running Chrome 26, are you running a different version? This is what I see: http://i.imgur.com/85pTKeW.png – A.M.K May 09 '13 at 21:13
  • Oh man, I was looking at in FF. :p sorry, long day. Yeah it looks great. Now, I don't know a whole lot about SVG, but would the border radius be scalable or is it similar to loading an image? Thanks a whole lot for your help by the way. – Aaron May 09 '13 at 21:39
  • No problem. Yes, since SVG's are vectors you can scale them infinitely. The simplest way to do it would be to use the SVG transform scale property (AFAIK it's the same as CSS's), you can put it just after ` – A.M.K May 09 '13 at 23:07
  • And here's a very quick (and dirty) jQuery plugin: http://jsfiddle.net/pe3QS/7/ :D (I'm bored) – A.M.K May 09 '13 at 23:26
  • Haven't tested it out yet, but I'm marking this as the right answer since you've taken the time to help me out. Thank you so much :) – Aaron May 10 '13 at 00:41
  • I have to wait 2 hours before I can award bounty, but will :) – Aaron May 10 '13 at 00:41
  • Absolutely! Thanks again for the help :) – Aaron May 10 '13 at 03:31
  • Both JSFiddle demos have no rounded corners (no longer works?), I'm just impressed JSFiddle kept this (and itself) alive since 2013. – Ben Butterworth May 06 '21 at 18:23