Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

CodePen

Answer 1

为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;
    }

Answer 2

这是代码，将边框半径添加到视频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>

HTML5视频溢出问题

2 个答案: