Javascript 带有响应式 HTML5 视频的 Bootstrap 轮播？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29144604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel with responsive HTML5 videos?
提问by Paperbag Writer
I'm trying to make a carousel with videos. With the images it works fine the image are responsive even in mobile view. But with videos the width is responsive but not the height. Basically I would like to achieve the same comportement with a carousel image but with a video. I've tried many tricks online but none is doing it. My video is 1024/552px
我正在尝试制作带有视频的轮播。图像工作正常，即使在移动视图中图像也能响应。但是对于视频，宽度是响应性的，而不是高度。基本上我想用轮播图像但用视频来达到同样的效果。我在网上尝试了很多技巧，但都没有做到。我的视频是 1024/552px
Tried my best at a fiddle. You can see if you load the fiddle with a small width, it keeps the same height and it isn't responsive but the width of the carousel/video is (it crops the video on the sides though). It doesn't have the same comportement as an image. As you will see I have included an image in the second slide to further demonstrate my problem.
尽我所能拉小提琴。您可以查看是否以较小的宽度加载小提琴，它保持相同的高度并且它没有响应，但轮播/视频的宽度是（尽管它会在两侧裁剪视频）。它没有与图像相同的表现。正如您将看到的，我在第二张幻灯片中包含了一张图片以进一步说明我的问题。
https://jsfiddle.net/687bsb21/1/
https://jsfiddle.net/687bsb21/1/
Here's the code :
这是代码：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div align="center">
<video autoplay loop>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="1024" height="552" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-caption">
<h3>hello</h3>
<p>hello</p>
</div>
</div>
<div class="item">
<img src="http://dummyimage.com/1024x552/000/fff" class="img-responsive" alt="asfds">
<div class="carousel-caption">
<h3>hello</h3>
<p>hello.</p>
</div>
</div>
<a class="left carousel-control" href="#carouselHelp" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHelp" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Thanks for helping.
谢谢你的帮助。
采纳答案by Logz
add your css,
添加你的CSS，
video{
width:100%
}
回答by WongFaiHung
also adding the width/height directly to the tag works:
还将宽度/高度直接添加到标签作品中：
<video autoplay loop width="1024" height="552">
regards.
问候。
回答by Felipe de Castro
This is the best solution:
这是最好的解决方案：
<div class="container">
<video><source src="video.mp4" type="video/mp4"></video>
</div>
.container{
position: relative;
width: 100%
}
.container video{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
