Bootstrap 4 Embed Responsive Video With Controls

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 sc

Solution 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 --><linkrel="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 --><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="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><divid="trailer"class="section d-flex justify-content-center embed-responsive embed-responsive-21by9"><videoclass="embed-responsive-item"controlsautoplayloopmuted><sourcesrc="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 --><linkrel="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 --><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="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><divid="trailer"class="section d-flex justify-content-center embed-responsive embed-responsive-4by3"><videoclass="embed-responsive-item"controlsautoplayloopmuted><sourcesrc="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 --><linkrel="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 --><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="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><divid="trailer"class="section d-flex justify-content-center embed-responsive embed-responsive-16by9"><videoclass="embed-responsive-item"controlsautoplayloopmuted><sourcesrc="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.