HTML5 Video Border Radius in Chrome Not Working
css, html, javascript, jquery
Solution
To quote another post:
There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one or this one specifically about the video element.
If you apply the border-radius to an element that wraps around the video, and adds a `-webkit-mask-image`, then it can be done in Chrome. Here's a demo that masks a transparent png and clips the corners of the video:
Demo (transparent background): http://jsfiddle.net/pe3QS/24/
Update: I changed the HTML/CSS to only use one wrapping element, and it works on (at least) IE9+, FF and Chrome.
CSS:
div.outer {
float: left;
height: 240px;
}
div.outer video {
width: 320px;
height: 100%;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
border-radius: 32px 0 32px 0;
}
HTML:
<div class="outer">
<video src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
Problem
I am trying to make my HTML5 video have top-left and bottom-left rounded corners with transparency, just like how it would act when using border-radius. Unfortunately in Chrome the border-radius does not work for some kind of reason on the HTML video tag, but does in IE10 and Firefox. After several attempts of trying to achieve that I stumbled upon this answer: https://stackoverflow.com/a/16470150/1115367 But I quickly found out that this will fill in a color in the rounded corners, instead of making it transparent. How can I make the border radius working on a HTML5 video in Google Chrome without decreasing the video performance? I'm willing to use javascript / jQuery if necessary.