Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

rounded corners on html5 video

Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?

Check out this example. it's not working.

like image 227
Web_Designer Avatar asked Jun 04 '11 17:06

Web_Designer


People also ask

How do you round the corners of an iframe?

The way to go is wrapping the iframe in a circular div as other users suggested. The only difference being that you have to add an additional style position:relative to the wrapper for it to work in Chrome browser. Show activity on this post. Wrapping the <iframe> in a <div> should work.


1 Answers

Create a div container with rounded corners and overflow:hidden. Then place the video in it.

<style> .video-mask{     width: 350px;     border-radius: 10px;      overflow: hidden;  } </style>   <div class="video-mask">     <video></video> </div> 
like image 128
Wreeecks Avatar answered Sep 22 '22 14:09

Wreeecks