bxslider с проблемой видео и изображений

Мне удалось заставить его работать, но он не на весь экран, он только маленький в центре экрана. Я приложил скриншот и обновленную кодировку

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<div class="col-md-12">
  <ul class="bx">
    <li data-idx="0">
      <video id="vid0" class="vid" src="videos/ecotec-filters-ltd.mp4" controls width='320' height='180' autoplay="autoplay"></video>
    </li>
    <li data-idx="1">
      <img src="images/slideshow/field-pounds.jpg">
    </li>
    <li data-idx="2">
      <img src="images/slideshow/red-sunset.jpeg">
    </li>
    <li data-idx="3">
      <img src="images/slideshow/office.jpg">
    </li>
    <li data-idx="4">
      <img src="images/slideshow/polygonum-bistorta.jpeg">
    </li>
      <li data-idx="5">
      <img src="images/slideshow/notahill.jpeg">
    </li>
      <li data-idx="6">
      <img src="images/slideshow/products-header-new.jpg">
    </li>
      <li data-idx="7">
      <img src="images/slideshow/hepa-banner.jpg">
    </li>
      <li data-idx="8">
      <img src="images/slideshow/panel-banner-new.jpg">
    </li>
      <li data-idx="9">
      <img src="images/slideshow/rigidcellbanner.jpg">
    </li>
      <li data-idx="10">
      <img src="images/slideshow/carbonfilter.jpg">
    </li>
      <li data-idx="11">
      <img src="images/slideshow/new-products-header.jpg">
    </li>
      <li data-idx="12">
      <img src="images/slideshow/ecotec-made-in-britain.jpg">
    </li>
  </ul>
</div>

<script src="js/jquery.js"></script>

<script src="https://cdn.jsdelivr.net/g/[email protected](jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>

<script src="js/plugins.js"></script>

<script src="js/jquery.meanmenu.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.countTo.js"></script>

<script src="js/owl.carousel.min.js"></script>

<script src="js/jquery.mixitup.min.js"></script>

<script src="js/jquery.easing.min.js"></script>

<script src="js/jquery.fancybox.pack.js"></script>

<script src="js/jquery.appear.js"></script>

<script src="js/isotope.js"></script>

<script src="js/jquery.prettyPhoto.js"></script>

<script src="js/jquery.magnific-popup.min.js"></script>

<script src="js/jquery.bootstrap-touchspin.js"></script>

<script src="js/jquery-ui.js"></script>

<script src="js/SmoothScroll.js"></script>

<!-- thm custom script /-->
<script src="js/custom.js"></script>

<script >
  $(function () {
      $('.bx').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 600
      });
    });

</script>

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

<script >
  $(function () {
      $('.bx').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 0
      });
    });

</script>

Также у вас загружено несколько библиотек jquery, которые следует удалить. Убедитесь, что используется только один из них.

Весь проект будет выглядеть так:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

    <div class="col-md-12">
      <ul class="bx">
        <li data-idx="0">
          <video id="vid0" class="vid" src="https://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" controls
            width='320' height='180' autoplay="autoplay"></video>
        </li>
        <li data-idx="1">
          <img src="https://dummyimage.com/320x180/000/fff.png&text=2">
        </li>
        <li data-idx="2">
          <img src="https://dummyimage.com/320x180/000/fc0.png&text=3">
        </li>
        <li data-idx="3">
          <img src="https://dummyimage.com/320x180/000/0ff.png&text=4">
        </li>
        <li data-idx="4">
          <video id="vid4" class="vid" src="https://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" controls
            width='320' height='180' autoplay="autoplay"></video>
        </li>
      </ul>
    </div>


    <script src="https://cdn.jsdelivr.net/g/[email protected](jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>


    <!-- main jQuery /-->
    <script src="js/jquery.js"></script>
    <!-- jQuery plugins /-->
    <script src="js/plugins.js"></script>
    <!-- jQuery meanmenu /-->
    <script src="js/jquery.meanmenu.js"></script>
    <!-- bootstrap /-->
    <script src="js/bootstrap.min.js"></script>
    <!-- count to /-->
    <script src="js/jquery.countTo.js"></script>
    <!-- owl carousel /-->
    <script src="js/owl.carousel.min.js"></script>
    <!-- validate /-->
    <script src="js/validation.js"></script>
    <!-- mixit up /-->
    <script src="js/jquery.mixitup.min.js"></script>
    <!-- easing /-->
    <script src="js/jquery.easing.min.js"></script>
    <!-- gmap helper /-->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHzPSV2jshbjI8fqnC_C4L08ffnj5EN3A"></script>

    <script src="js/map-helper.js"></script>
    <!-- fancy box /-->
    <script src="js/jquery.fancybox.pack.js"></script>
    <script src="js/jquery.appear.js"></script>
    <!-- isotope script /-->
    <script src="js/isotope.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.bootstrap-touchspin.js"></script>

    <!-- jQuery ui js /-->
    <script src="js/jquery-ui.js"></script>
    <script src="js/SmoothScroll.js"></script>
    <!-- thm custom script /-->
    <script src="js/custom.js"></script>
    <script >
      $(function () {
          $('.bx').bxSlider({
            mode: 'fade',
            captions: true,
            slideWidth: 0
          });
        });

    </script>