Bootstrap 4 Embed Responsive Video with Controls

Question

I'm using Bootstrap 4's responsive embedded video functionality and it works just fine on the video, but doesn't scale the controls (pause, play, etc). Are the controls just not scalable or am I missing something in the code?

    <div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-4by3">
      <video class="embed-responsive-item" controls>
        <source src="assets/TMMTrailer18.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>

Thanks!

Answer 1

Videos have a fixed aspect ratio. Bootstrap here allows us to adjust the width and height of the video to span as much space as possible without changing this ratio. But it doesn't matter if we haven't selected a "class" with the appropriate aspect ratio (Height or width), whichever reaches 100% first will center the other.

This causes the video to be centered from the bottom or top, or right or left.

In fact, this is what popular platforms like Youtube and Vimeo do. They just make the background color black, which they want to give the impression that there is a player wrapped around the control buttons.

What you need to do here is to make the background-color: black.

For example 21by9 Class & 16by9 video

.embed-responsive-item {
  background-color: black;
}

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-21by9">
  <video class="embed-responsive-item" controls autoplay loop muted>
        <source src="https://player.vimeo.com/external/325698769.sd.mp4?s=4e70164190f4b472059c9f4ca74ca0ca58056ce4&profile_id=165" type="video/mp4">
        Your browser does not support the video tag.
      </video>
</div>

For example 4by3 Class & 16by9 video

.embed-responsive-item {
  background-color: black;
}

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-4by3">
  <video class="embed-responsive-item" controls autoplay loop muted>
        <source src="https://player.vimeo.com/external/325698769.sd.mp4?s=4e70164190f4b472059c9f4ca74ca0ca58056ce4&profile_id=165" type="video/mp4">
        Your browser does not support the video tag.
      </video>
</div>

For example 16by9 Class & 16by9 video

Here it ensures that the class and video are in exact match.

.embed-responsive-item {
  background-color: black;
}

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-16by9">
  <video class="embed-responsive-item" controls autoplay loop muted>
        <source src="https://player.vimeo.com/external/325698769.sd.mp4?s=4e70164190f4b472059c9f4ca74ca0ca58056ce4&profile_id=165" type="video/mp4">
        Your browser does not support the video tag.
      </video>
</div>

The responsive class of bootstrap makes video-players responsive, not videos. Videos also try to spread to the maximum possible area of ​​these players.

If you intuitively set your responsive embed class to be wide, like example (21by9 -> 16by9), people are very used to having gaps on the left and right of the video and the ratio appearing black. My suggestion is to make your class 16by9 or 21by9 instead of 4by3.