I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle.
My preference would be to utilize a div object (png image) as a mask for the video, but if that's not feasible, I'm open to using a circular mask instead.
Here is the existing code:
<style>
video, canvas {
z-index: 1;
position: absolute;
top: 10%;
left: 25%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
}
</style>
<video id="video" width="600" height="450" preload autoplay loop muted controls></video>
<canvas id="canvas" width="600" height="600"></canvas>
Having a circular mask for the video is preferred over changing the aspect ratio, which could result in distortion. Thank you!