Fitting Video In Slider (Bootstrap 4.0)

For my school I have to do a website with a video slider. I chose to work with bootstrap 4.0. So far I got a template from it and tried to put a video inside it on one of the slide

Solution 1:

First you need to fix your layout. All the content of the body should be inside a container, row, and col-12.

<div class="container">
  <div class="row">
    <div class="col-12">

    </div>
  </div>
</div>

All of the carousel related code should go inside the col-12. Doing so, the carousel's width is the same as that of the nav, and there are free space on both sides of it.

The controllers are positioned absolute. Two of their parents are positioned relative. If you do not have enough information on CSS positioning, read this post.

There are a couple of ways to get the controllers outside of the carousel.

Method 1

1. Put the two controllers code below the container.

<div class="container">
  <div class="row">
    <div class="col-12">

    </div>
  </div>
</div>

<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
  <span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

3. Put all the above code inside an another element with position-relative class.

<div class="position-relative">
  <div class="container">
    <div class="row">
      <div class="col-12">




      </div>
    </div>
  </div>

  <a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
    <span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

Check this pen

Method 2

Override the position property of carousel and the col-12 using the code below. They are relatively positioned.

.position-initial {
  position: initial !important;
}

<div class="postion-relative">
  <div class="container">
    <div class="row">
      <header class="col-12 position-initial">
        <!--Carousel Wrapper-->
        <div id="video-carousel-example2" class="carousel slide carousel-fade position-initial" data-ride="carousel">

        </div>
      </header>

    </div>
  </div>
</div>

Now, since the div with position-relative class has full width and the controllers are absolutely positioned, the controller are inside the full-width div.

Check this pen