video with equal width and height

Question

I want to create a video tag with the same width and height, and then set the border-radius to be in a circle.

HTML:

<div id="parent">
  <div id="child"></div>
</div>

CSS:

#parent {
  width: 100px;
  height: 100px;
}

#child {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ff0;
}

http://jsfiddle.net/9eKhd/

It also works for <img>. But when I set the <video> width and height to be equal, it always makes width or height to be smaller to keep the radio. What I want is to cut the area out of a square and then make the video shown as a circle.