如何解决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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。