Bootstrap 5 carousel showing controls on IOS

Question

I’m building a funnel for a client and am a bit stuck. I’m using a WYSIWYG builder but integrating with some custom code. The page is website

I’m using bootstrap and have included the css and JS header links.

On implementing the bootstrap carousel, the control buttons “next” and “previous” show up on iPhone. On every other device it works perfect but on iPhone it looks like in the picture.

Any ideas?

I’m expecting it to work on all platforms and devices

Code:

 <style>
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  display: none;
  position: relative;
  transition: transform 0.6s ease;
}

.carousel-item.active {
  display: block;
}

.carousel-item iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
</style>
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
 <div class="carousel-item active">
  <iframe src="https://www.youtube.com/embed/Fog2SRQtmYw" 
   allowfullscreen></iframe>
</div>
<div class="carousel-item">
  <iframe src="https://www.youtube.com/embed/Ct7l0LqGdLY" 
 allowfullscreen></iframe>
</div>
<div class="carousel-item">
  <iframe src="https://www.youtube.com/embed/f6LAXngGEes" 
 allowfullscreen></iframe>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs- 
 target="#carouselExample" data-bs-slide="prev">
 <span class="carousel-control-prev-icon" aria-hidden="true"> 
 </span>
 <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs- 
 target="#carouselExample" data-bs-slide="next">
 <span class="carousel-control-next-icon" aria-hidden="true"> 
 </span>
 <span class="visually-hidden">Next</span>
</button>
</div>

Then I have these headers in the head section:

<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.7.0/css/font-awesome.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.3.0/css/font-awesome.css" rel="stylesheet" 
 type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]
 /dist/css/bootstrap. min.css" rel="stylesheet" integrity="sha384- 
 QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
 crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/
 dist/js/bootstrap.bundle.min.js" integrity="sha384- 
 YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
 crossorigin="anonymous"></script>