Отзывчивость видео html5 внутри карусели на устройствах с маленьким экраном,

Question

Итак, я работаю в проекте, где целевая страница состоит из карусели. Первый элемент - это видео, а остальные - изображения. Изображения сделаны адаптивными, поэтому они не создают проблемы, а также их Размеры известны.

Проблема связана с видео-частью. Она хорошо работает, охватывая весь экран для устройств с большим экраном. Но как только вы проверяете на маленьком экране, его высота не соответствует высоте изображений, а также верхняя часть клипа получает вырезать.

это код

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

вот код css для него

    video {
    width: 100%;
    height: auto;
}

также есть еще одна проблема на устройстве с большим экраном: элементы управления видео, кроме кнопки воспроизведения, не видны