'Swiper.js Slider Background Video got stuck and don't play sometimes

Hi guys I'm creating a slider using swiper js custom code on nyside5.internet.dk/. Using this line of code given below:

<html>
    <head>
        <style>
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

/* Text Overlay */
#lab_video_text_overlay h2 {
  font-size:4em
}

#lab_video_text_overlay .btn {
  border-radius:0;
  text-transform:uppercase;
  font-weight:200;
}
#lab_video_text_overlay .btn-warning {
  background-color:#F5D328;
}

#lab_video_text_overlay {
  position: absolute;
  color: #FFF;
  width: 100%;
  top: 25%;
}

#lab_video_text_overlay .container {
  text-align: center;
  margin: 0px auto;
//  background-color: #669900;
}

@media screen and (max-width:991px) {
  #lab_video_text_wrap {
    height: 300px;
  }
}

@media screen and (max-width:650px) {
  #lab_video_text_wrap {
    height: 250px;
  }
  #lab_video_text_overlay h2 {
    font-size: 2em;
  }
  #lab_video_text_overlay p {
    font-size: .9em;
  }
}
        </style>
    </head>
<body>
<!-- reference examples at https://www.idangero.us/swiper/demos/#.Vl8kD9-rRHc -->
<section id="lab_video_slider">
  <div class="container-fluid">
    <div class="row">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

      <!-- Link Swiper's CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/css/swiper.min.css">

      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div id="slide_one" class="swiper-slide">
            <!-- VIDEO -->
            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" post="//nyside5.internet.dk/wp-content/uploads/revslider/video-media/moviefront720_38.jpeg">
              <source src="//nyside5.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" type="video/mp4">
            </video>
            <!-- END VIDEO -->
          </div>

          <div id="slide_two" class="swiper-slide">
  <div id="lab_video_text_overlay">
    <div class="container">
      <h2>Lorum Ipsum Deloras </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie</p>
      <a href="#" class="btn btn-default">View Our Work</a>
      <a href="#" class="btn btn-warning">Learn About Us</a>

    </div>
  </div>
  <!-- end #lab_overlay -->

            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" post="https://nyside5.internet.dk/wp-content/uploads/revslider/video-media/Frontmovie2_720_41.jpeg">
              
      <source type="video/mp4" src="//nyside5.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4">
</video>
          
        </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

      <!-- Swiper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/js/swiper.min.js"></script>

      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            autoplay: 5000,
            autoplayDisableOnInteraction: false
        });
      </script>
    </div>
    <!-- end .row -->
  </div>
  <!-- end .container-->
  </section>
  <!-- end section -->
</body>
</html>

But for some reason, the background videos place at each slide got stuck and don't play sometimes. Also, I want the next slide to start after the end of the video of the previous slide. But the slides keep switching whether the video from the previous slides completes or not. Do you guys have any suggestions for me? I need someone's help very badly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Swiper.js Slider Background Video got stuck and don't play sometimes

Sources

Related Questions