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

如何解决Bootstrap 4嵌入带有控件的响应视频

我正在使用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>

谢谢！

解决方法

视频具有固定的宽高比。 引导程序在这里，我们可以调整视频的宽度和高度，以在不更改该比例的情况下尽可能地覆盖整个空间。但是，如果我们没有选择具有适当长宽比（class）的“ Height or width”并不重要，首先达到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。