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視頻？

回答

相關問題