Bootstrap轮播与响应HTML5视频？

我正在试着制作带有视频的旋转木马。有了这些图像，它可以很好地工作，即使在移动视图中图像也能够响应但对于视频宽度是响应，但不是高度。基本上我想用旋转木马图像来达到同样的效果，但是用视频。我在网上尝试了很多技巧，但没有一个在做。我的视频是1024/552pxBootstrap轮播与响应HTML5视频？

在小提琴中试过我最好的。你可以看到你是否用小宽度加载小提琴，它保持相同的高度，并且它不响应，但是传送带/视频的宽度是（它裁剪侧面的视频）。它不具有与图像相同的比例。正如您将看到的，我在第二张幻灯片中包含了一张图像，以进一步展示我的问题。

https://jsfiddle.net/687bsb21/1/

下面的代码：

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

感谢您的帮助。

来源

2015-03-19 Paperbag Writer

添加你的CSS，

video{ 
width:100% 
}

来源

2015-03-19 12:35:36 Logz

它的作品，但在我的项目在这里是做什么的小提琴：任何想法，为什么？ http://i.imgur.com/CcBBvBY.png – 2015-03-19 13:02:33

视频现在调整大小，但旋转木马没有？我删除了所有其他的CSS，所以问题不存在 – 2015-03-19 13:08:43

我把这个视频最大宽度：100％;身高：自动; }现在它可以工作。感谢您让我走上正轨！ – 2015-03-19 13:13:23

也直接增加了宽度/高度到标签的运作方式：

<video autoplay loop width="1024" height="552">

问候。

来源

2015-03-19 12:36:45 WongFaiHung

但这没有反应。 – 2017-02-20 18:19:54

这是最好的解决办法：

<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%);        
}

来源

2017-07-11 01:36:46

Bootstrap轮播与响应HTML5视频？

回答

相关问题