why video autoplay is not working when use that with bootstrap carousel?-CodePudding

Video is not auto-play. same code is working if place in a different file but the same code is not working with my page.? can anyone help with this.

Now working URL: https://pcbmagic.com/

in the above URL video is not autoplay. i have tried everything that's possible but still not working. maybe my explanation is not good but hope you can understand and if any clarification needed you can comment.

thanks in advance.

.video
        {
            width: 100%;
            height: 512px;
            object-fit: cover;
        }
        #carousel .carousel-item {
          height: 100vh;
          width: 100%;
          min-height: 350px;
          background: no-repeat center center scroll;
          background-size: cover;
        }
        
        #carousel .carousel-inner .carousel-item {
          transition: -webkit-transform 2s ease;
          transition: transform 2s ease;
          transition: transform 2s ease, -webkit-transform 2s ease;
        }
        
        #carousel .carousel-item .caption {
          background-color: rgba(0, 0, 0, 0.5);
          padding: 40px;
          color: white;
          animation-duration: 1s;
          animation-delay: 2s;
        }
        
        #carousel .caption h2 {
          animation-duration: 1s;
          animation-delay: 2s;
        }
        
        #carousel .caption p {
          animation-duration: 1s;
          animation-delay: 2.2s;
        }
        
        #carousel .caption a {
          animation-duration: 1s;
          animation-delay: 2.4s;
        }
        
        /* Button */
        .delicious-btn {
            display: inline-block;
            color: #ffffff;
            border: none;
            border-left: 3px solid #1c8314;
            border-radius: 0;
            padding: 0 30px;
            font-size: 16px;
            line-height: 35px;
            font-weight: 600;
            -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
            text-transform: capitalize;
            background-color: #40ba37;
            margin-top: 15px;
        }
        
        .delicious-btn.active, .delicious-btn:hover, .delicious-btn:focus {
          font-size: 16px;
          font-weight: 600;
          color: #ffffff;
          background-color: #1c8314;
          border-color: #40ba37;
        }
        
        .slider-content-main
        {
            background: white;
            padding: 25px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <section class="">
        <div id="carouselExampleIndicators" class="carousel slide hero-slides" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox" style="border: 1px solid #dedede;">
              <video autoplay loop class="video" id="vid">
                     <source src="https://pcbmagic.com/small5.mp4" width="1024" type="video/mp4" >
                     Your browser does not support the video tag.
              </video>
            <div class="carousel-item active">
              <div class="container d-none d-md-block">
                <div class="row align-items-center ml-4" style="height: 512px;">
                  <div class="col-12 col-md-9 col-lg-7 col-xl-6 slider-content-main">
                    <div class="caption animated fadeIn">
                      <h2 class="animated fadeInLeft">Boat Excursions</h2>
                      <p class="animated fadeInRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique nisl vitae luctus sollicitudin. Fusce consectetur sem eget dui tristique, ac posuere arcu varius.</p>
                      <a class="animated fadeInUp btn delicious-btn" href="#">Learn more</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="carousel-item ">
              <div class="container d-none d-md-block">
                <div class="row align-items-center ml-4" style="height: 512px;">
                  <div class="col-12 col-md-9 col-lg-7 col-xl-6 slider-content-main">
                    <div class="caption animated fadeIn">
                      <h2 class="animated fadeInLeft">Explore the river valley</h2>
                      <p class="animated fadeInRight">Lorem ipsum dolor sit amet,</p>
                      <a class="animated fadeInUp btn delicious-btn" href="#">Learn more</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--<div class="carousel-item">
              <img class="d-block w-100" src="https://pcbwayfile.s3-us-west-2.amazonaws.com/banner/21/03/25/1808173691783t.jpg" alt="Third slide">
              
            </div>-->
          </div>
        </div>
        
     </section>
</body>
</html>

CodePudding user response：

you have to add muted in your video tag :-).

<video autoplay loop ➡️ muted ⬅️ class="video">

it's because google don't allow video autoplay having audio. you can read crome policy by below link.

only allow once user interact with that video like. click,tap etc.

https://developer.chrome.com/blog/autoplay/