CODEWITHSUNDEEP
htmlgoogle-chromevideocss
Aaron
Aaron

Reputation: 2500

Add a Border Radius to <video> tag in Chrome

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?

Upvotes: 5

Views: 7551

Answers (1)

A.M.K
A.M.K

Reputation: 16795

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.

Upvotes: 6

Related Questions