Question

我正在学习bootstrap 3而我正面临着这个问题 - 我自己托管的视频总是比他们在大屏幕上要大。这是我在教程（基本模板）中使用的引导代码。我试图将464x288视频添加到单个大小为12列的行中：

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="embed-responsive embed-responsive-4by3">
                    <video class="embed-responsive-item" width="464" height='288' controls> 
                        <source src="Bad_Taste.mp4" type="video/mp4">
                        <source src="Bad_Taste.webm" type="video/webm"> 
                        <source src="Bad_Taste.ogv" type="video/ogg">
                        I'm sorry; your browser doesn't support HTML5 video.
                    </video>
                </div>
            </div>
        </div>
    </div>

渲染结果使vid的高度和宽度增加了几倍： [我的渲染结果 - 重新调整大小的vid] [1] [1]：http://i.imgur.com/BFN0jkC.jpg?1。我怎样才能保留原始分辨率？我尝试使用＆＃34; col-xs（md | lg）-6＆＃34;，＆＃34; col-xs（md | lg）-5＆＃34;的组合。并且它有助于防止过度调整大小，但由于我有不同分辨率的视频，我正在寻找一个能够适合所有视频的html / css代码而不会在大屏幕上使它们更大。< / p>

Answer 1

使用Bootstrap 3应该可以像这样解决它（或者当然是添加你自己的CSS类）：

.embed-responsive-item {
    max-width: 464px;
    max-height: 288px;
}

Bootstrap CSS不断重新调整我自己托管的视频

1 个答案: