Bootstrap 4 嵌入带有控件的响应式视频

Question

我正在使用 Bootstrap 4 的响应式嵌入式视频功能，它在视频上运行良好，但无法缩放控件（暂停、播放等）。控件只是不可扩展还是我在代码中遗漏了什么？

    <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>

谢谢！

Answer 1

视频具有固定的纵横比。 Bootstrap 允许我们在不改变这个比例的情况下调整视频的宽度和高度以跨越尽可能多的空间。但是，如果我们没有选择具有适当纵横比 (Height or width) 的“class”也没关系，无论哪个先到达100%，都会居中另一个。

这会使视频从底部或顶部、右侧或左侧居中。

事实上，这就是 Youtube 和 Vimeo 等流行平台的做法。他们只是将背景颜色设置为黑色，以便给人一种环绕在控制按钮周围的玩家的印象。

你需要在这里做的是background-color: black。

例如 21by9 类和 16by9 视频

.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>

例如 4by3 类和 16by9 视频

.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>

例如 16by9 类和 16by9 视频

这里确保课程和视频完全匹配。

.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>

响应式引导类使视频播放器具有响应性，而不是视频。视频也尽量传播到这些玩家的最大可能区域。

如果您直观地将您的响应式嵌入class 设置为宽，例如example (21by9 -> 16by9)，人们非常习惯视频的左右有间隙并且比例显示为黑色。我的建议是让你的班级16by9 或21by9 而不是4by3。