Search code examples
htmlcsscarouselangular-ui-bootstrap

Bootstrap Carousel with video not working

I have carousel with videos as a background in home tab. The carousel, instead of the video, displays only the first frame of the video as image. But when I go to a another tab, for example 'my account', and back to home, the video shows up good, as video, not like image. Why is this happening?

html:

<div id="carouselExampleIndicators" class="carousel 
slide router" 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">
    <div class="carousel-item active">
      <video class="d-block w-100"  style="width: 80%;" 
       autoplay loop muted alt="First slide">
        <source src="assets/img/video/1.mp4" type="video/mp4" />
    </video>
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color: black;">Slider One Item</h5>
        <p style="color: black;">Lorem ipsum dolor sit amet, 
          consectetur adipisicing elit. Maxime, nulla, tempore.
          Deserunt excepturi quas
          vero.</p>
      </div>
    </div>
    <div class="carousel-item">
      <video class="d-block w-100"  style="width: 80%;" 
        autoplay loop muted alt="Second slide">
        <source src="assets/img/video/2.mp4" type="video/mp4" />
    </video>
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color: black;">Slider One Item</h5>
        <p style="color: black;">Lorem ipsum dolor sit amet, 
          consectetur adipisicing elit. Maxime, nulla, tempore.
          Deserunt excepturi quas
          vero.</p>
      </div>
    </div>
    <div class="carousel-item">
      <video class="d-block w-100"  style="width: 80%;" 
             autoplay loop muted alt="Third slide">
        <source src="assets/img/video/3.mp4" type="video/mp4" />
    </video>
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color: black;">Slider One Item</h5>
        <p style="color: black;">Lorem ipsum dolor sit amet, 
           consectetur adipisicing elit. Maxime, nulla, tempore.
          Deserunt excepturi quas
          vero.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 
     role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" 
      role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS:

.router{
    margin-right: -2cm;
    margin-left: -2cm;
    margin-top: -22mm;
}

.carousel-item {
    height: 100vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .carousel-caption {
    bottom: 270px;
  }
  
  .carousel-caption h5 {
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 25px;
  }
  
  .carousel-caption p {
    width: 75%;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
  }

enter image description here

Solution

  • It was problem with videos in Angular, answer to my question I find in this in this thread: Angular HTML Fullscreen Video Autoplay Not Working

    <video loop muted autoplay oncanplay="this.play()" 
       onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>