HTML5 video inside owl carousel somehow loaded twice

Somehow, there's multiple download for the video inside my owl carousel. There is only 3 video showing up, that's correct. But lighthouse shows video downloaded multiple times ...? And now I got very bad score from it.

Part of problematic code :

<section id="akp-home" class="home-slider owl-carousel">
  <div class="slider-item" style="background-image: url('https://anugerahkreasiplasindo.id//wp-content/uploads-webpc/2020/06/manufacture.jpg.webp');">
    <div class="video-container">
          <video autoplay muted loop>
              <!--<source src="https://www.dropbox.com/s/raw/jzkpjsn81nau7d8/manufacture-v3.mp4" type="video/mp4">-->
              <source src="https://anugerahkreasiplasindo.id//wp-content/uploads/2020/06/manufacture-v3.mp4" type="video/mp4">

          </video>

    </div>



    <div class="container">
      <div class="row slider-text align-items-center justify-content-center">
        <div class="col-lg-7 text-center col-sm-12 element-animate">
          <!--<div class="btn-play-wrap mx-auto"><p class="mb-4"><a href="https://www.youtube.com/watch?v=vRBDEKI6rcw" data-fancybox data-ratio="2" class="btn-play"><span class="ion ion-ios-play"></span></a></p></div>-->
          <h1 class="mb-4"><span>Contract Manufacturing</span></h1>
          <!--<p class="mb-5 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
        </div>
      </div>
    </div>
  </div>

  <div class="slider-item" style="background-image: url('https://anugerahkreasiplasindo.id//wp-content/uploads-webpc/2020/06/recycle.jpg.webp');">
     <div class="video-container">
          <video autoplay muted loop>
              <!--<source src="https://www.dropbox.com/s/raw/cgsk4kfru9ewmdl/recycle-v3.mp4" type="video/mp4">-->
              <source src="https://anugerahkreasiplasindo.id//wp-content/uploads/2020/06/recycle-v3.mp4" type="video/mp4">
          </video>

    </div>

    <div class="container">
      <div class="row slider-text align-items-center justify-content-center">
        <div class="col-lg-7 text-center col-sm-12 element-animate">
          <!--<div class="btn-play-wrap mx-auto"><p class="mb-4"><a href="https://www.youtube.com/watch?v=HaDoKXG5xPU&t=28s" data-fancybox data-ratio="2" class="btn-play"><span class="ion ion-ios-play"></span></a></p></div>-->
          <h1><span>Recycling</span></h1>
          <!--<p class="mb-5 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
        </div>
      </div>
    </div>

  </div>

  <div class="slider-item" style="background-image: url('https://anugerahkreasiplasindo.id//wp-content/uploads-webpc/2020/06/logistic.jpg.webp');">
      <div class="video-container">
          <video autoplay muted loop>
            <!--<source src="https://www.dropbox.com/s/raw/p8wogpeh4nr0wgp/logistic-v3.mp4" type="video/mp4">-->
            <source src="https://anugerahkreasiplasindo.id//wp-content/uploads/2020/06/logistic-v3.mp4" type="video/mp4">

          </video>

    </div>
    <div class="container">
      <div class="row slider-text align-items-center justify-content-center">
        <div class="col-lg-7 text-center col-sm-12 element-animate">
          <!--<div class="btn-play-wrap mx-auto"><p class="mb-4"><a href="https://www.youtube.com/watch?v=HaDoKXG5xPU&t=28s" data-fancybox data-ratio="2" class="btn-play"><span class="ion ion-ios-play"></span></a></p></div>-->
          <h1><span>Logistic Service</span></h1>
          <!--<p class="mb-5 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
        </div>
      </div>
    </div>

  </div>

</section>

Actual problematic website : https://anugerahkreasiplasindo.id

Part of lighthouse report :

I don't even know how to isolate the problem. To add more information, here goes the inspect element page. Why there's "cloned" owl carousel?

Solution

Here we go, apparently this question fixed my problem.

loop: false,
rewind: true

put that on the owl carousel javascript part. It will stop cloning, and lighthouse won't download video twice.

My original code has loop: true . I can't believe it is that simple.