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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With