小屏幕设备上的轮播中的html5视频响应能力，

Question

所以我正在一个项目中，目标页面由轮播组成，第一项是视频，其余的是图像，这些图像已经过响应，因此它们不会造成问题，而且尺寸是已知的。

问题出在视频部分，它可以很好地覆盖大屏幕设备的全屏显示，但是一旦您在小屏幕上查看它的高度与图像的高度不匹配，剪辑的顶部也会切。

这是代码

@

这是它的css代码

 <div class="carousel-inner" >
div class="item active"  >

<video  controls  >
  <source src="../video/v1.mp4" type="video/mp4" >
</video>
</div>



      <div class="item" >
        <img src="../images/jr2.jpg" alt="Los Angeles" class="img-responsive" id="carouselimg">

      </div>

      <div class="item">
        <img src="../images/b2.jpg" alt="Chicago"  class="img-responsive" 
id="carouselimg">
      </div>

     <div class="item">
        <img src="../images/b3.jpg" alt="Chicago"   class="img-responsive" id="carouselimg" >
      </div>
         <div class="item">
        <img src="../images/b4.jpg" alt="Chicago"   class="img-responsive" 
id="carouselimg">
      </div>
         <div class="item">
        <img src="../images/b5.jpg" alt="Chicago"   class="img-responsive" 
id="carouselimg">
      </div>
    </div>

在大屏幕设备上还有一个问题，除了播放按钮之外，视频控件不可见