HTML5视频溢出问题

Question

我有一个问题，我似乎无法解决，我检查并重新检查了几次代码，所以我需要一双新鲜的眼睛。我试图隐藏视频的溢出，因此它不会出现在视频容器外，但它只是扭曲视频开始溢出并允许它溢出。任何想法，我可能会错过？

.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

下面的代码，圆角半径添加到视频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>

Answer 2

添加opacity:0.99为.video-container更新时间：http://codepen.io/anon/pen/KdjdOR

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

    .player-controls { 
     display: none; 
    }