HTML5 Video overflow issue

Question

I am having a problem I just can't seem to solve, I have checked and rechecked the code a few times so I need a fresh pair of eyes. I am trying to hide the overflow of the video so it doesn't go outside the video container but it just distorts the video where it starts to overflow and allows it to overflow anyway. Any ideas what I might be missing?

.video-container {
  height: 400px;
  width: 640px;
  border: 3px solid;
  border-radius: 48px;
  overflow: hidden;
}
#video1 {
  height: 400px;
  width: 640px;
  object-fit: fill;
}
/* Remove Controls to work on container */

.player-controls {
  display: none;
}

<div class="row">
  <div class="col-lg-12 col-lg-offset-4">
    <div class="video-container">
      <video id="video1">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
      </video>
      <div class="player-controls">
        <button class="play-btn" id="play-pause-btn">
          <i class="glyphicon glyphicon play" id="ico-play-pause"></i>
        </button>
        <div class="progress">
        <div class="bufferBar"></div>
        <div class="timeBar"></div>
       </div>
     </div>
   </div>
 </div>
</div>

CodePen

Answer 1

Here's the code, add the border radius to the video div

.video-container {
  height: 400px;
  width: 640px;
  border: 5px solid;
  background: #efefef;
  border-radius: 48px;
  overflow: hidden;
}
#video1 {
  height: 400px;
  width: 640px;
  object-fit: fill;
  border-radius: 40px;
}
/* Remove Controls to work on container */

.player-controls {
  display: none;
}

<div class=container>
  <div class="row">
    <div class="col-lg-4 bg">
      <div class="video-container">
        <video id="video1">
          <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
        </video>
        <div class="player-controls">
          <button class="play-btn" id="play-pause-btn">
            <i class="glyphicon glyphicon play" id="ico-play-pause"></i>
          </button>
          <div class="progress">
            <div class="bufferBar"></div>
            <div class="timeBar"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>