My video is not auto-playing. The same code works when placed in a different file, but it's not working on my page. Can anyone help with this issue?
The URL where the video is not autoplaying:
I have tried everything I can think of to get it working, but still no luck. If my explanation is unclear, please let me know and I'll provide more details.
Thank you in advance for any assistance.
.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>