'bootstrap carousel border expands during slide

I'm building a bootstrap5 carousel with a video inside. The video has a fixed width and height and I am using a box-shadow on it.

The problem is that during every slide transition, the box-shadow expands as if the video element had a different height/width.

I need to know how to make the box-shadow stay at the exact same place, so that I don't end up with this messy/buggy transition:

snippet:

.monkey-video {
    /* box-shadow: 0px 0px -60px -40px rgba(255, 255, 255, 0.35) inset; */
    width: 200;
    height: 240;
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
} 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<body class="bg-dark">
<section id="chars-section" class="position-relative" style="width: 100%;">
                <div class="d-flex flex-column justify-content-evenly align-items-center ">

                    <h3 class="p-1" style="font-family: 'league_spartanbold'; color:   #F8C84A;">MEET THE MONKEYS</h3>

                    <div id="carousel-monkeys" class="carousel slide carousel-fade" data-bs-ride="carousel">
                        <div class="carousel-inner monkey-video">
                          <div id="0" class="carousel-item active">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Neandermonkey - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                          <div id="1" class="carousel-item">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Medieval - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                          <div id="2" class="carousel-item">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Futuro - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-monkeys" 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="#carousel-monkeys" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                </div>
            </section>
            </body>
javascripthtmlcssbootstrap-4


Solution 1:[1]

The problem is the #carousel-monkeys element width expands while the carousel items are in transition. You should set a fixed with on the #carousel-monkeys element to match the video width. Try this out:

<html>
   <head>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
      <style>
         #carousel-monkeys {
         width: 200px;
         }
      </style>
   </head>
   <body class="bg-dark">
      <section id="chars-section" class="position-relative" style="width: 100%;">
         <div class="d-flex flex-column justify-content-evenly align-items-center ">
            <h3 class="p-1" style="font-family: 'league_spartanbold'; color:   #F8C84A;">MEET THE MONKEYS</h3>
            <div id="carousel-monkeys" class="carousel slide carousel-fade" data-bs-ride="carousel">
               <div class="carousel-inner monkey-video">
                  <div id="0" class="carousel-item active">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
                  <div id="1" class="carousel-item">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
                  <div id="2" class="carousel-item">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
               </div>
               <button class="carousel-control-prev" type="button" data-bs-target="#carousel-monkeys" 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="#carousel-monkeys" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
               </button>
            </div>
         </div>
      </section>
   </body>
</html>

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 Josh Cronin

Related Questions