使用twitter bootstrap，如何使嵌入式視頻響應？

我正在嘗試製作嵌入式視頻，以響應窗口大小更改並與手機屏幕兼容。有誰知道要實現哪個類或如何使視頻響應？謝謝。使用twitter bootstrap，如何使嵌入式視頻響應？

2014-02-14 creedjarrett

這是非常開放式的。你在談論HTML5視頻嗎？閃光解決方案？請澄清。 – emptywalls

responsive embed component增加了release of Bootstrap 3.2.0。

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="…"></iframe> 
</div> 

<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
    <iframe class="embed-responsive-item" src="…"></iframe> 
</div>

來源

2014-08-08 14:23:45

這應該是更新的答案。 –

查看「Responsive video CSS」 - Source Code on github。

這是working demo on Bootply。點擊運行，看到它調整了不同的屏幕尺寸。

<section class="row"> 
    <div class="span6"> 
    <div class="flex-video widescreen"><iframe src="https://www.linktoyourvideo.com/..." frameborder="0" allowfullscreen=""></iframe></div> 
    </div> 
    <div class="span6"> 
    ... 
    </div> 
</section>

來源

2014-02-14 19:08:40 Shiva

對HTML5視頻的最簡單方法是添加類=「IMG IMG響應」視頻標籤：

<video controls class="img img-responsive">

來源

2014-04-16 07:17:42 bartbar

退房的響應，embedd.css位於存檔。應用該類.embed響應您的嵌入容器或您希望的任何其他類。

來源

2014-05-12 22:29:01 brandrich

使用twitter bootstrap，如何使嵌入式視頻響應？

回答

相關問題