How to display HTML5 Video Tag in Circle shape?

Question

I have tried this in css "border-radius:100%;", but it is not giving 100% circle.

Following are css and html

HTML

<div class="web-cam">

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

</div>

CSS

.web-cam video {
  width: 250px;
  height: 250px;
  border-radius: 100%;
  position: absolute;
  top: 0px;
  z-index: 5;
}

Answer 1

Style the containing div and the video element separately. Add a -webkit-mask-image to the containing div.

The -webkit-mask-image CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.

The code below creates an arbitrary circular radial gradient to use as the mask, but you could also use url() to specify an online circular PNG image for the clipping mask (as presented in Mozilla's doc).

HTML:

<div class="web-cam">
  <video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
  </video>
</div>

CSS:

.web-cam { 
  width: 250px;
  height: 250px;
  border-radius: 125px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

video {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -125px;
  left: -125px;
}

Unfortunately, you'll lose your default controller, but there are many ways to build your own custom controller:

http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

http://dev.opera.com/articles/custom-html5-video-player-with-css3-and-jquery/#sec1

http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html