Bootstrap 视频轮播高度

Question

我正在我的代码中实现这个引导视频轮播：

<div class="row">

        <h2>Videos</h2>
        <hr />

        <div class="carousel slide" id="videoCarousel" data-ride="carousel">
              <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#videoCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#videoCarousel" data-slide-to="1"></li>
                <li data-target="#videoCarousel" data-slide-to="2"></li>
                <li data-target="#videoCarousel" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                <iframe width="100%" height="100%" src="//www.youtube.com/embed/SEBLt6Kd9EY?controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
                </div>

            <div class="item">
                <iframe width="100%" height="100%" src="//www.youtube.com/embed/SEBLt6Kd9EY?controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
            </div>

            <div class="item">
                <iframe width="100%" height="100%" src="https://youtu.be/pVgtPovVSbY" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
            </div>

            <div class="item">
                <iframe width="100%" height="100%" src="//www.youtube.com/embed/SEBLt6Kd9EY?controls=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
            </div>
            </div>

            <!-- Left and right controls -->
                <a class="left carousel-control" href="#videoCarousel" 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="#videoCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">c</span>
                </a>

            </div>            
        </div>

我对图像轮播使用相同的代码，显然我使用 img 而不是 Iframe 作为要显示的元素的标记。我只是不明白为什么在视频轮播的情况下，我将视频显示在一个固定的高度，如果我通过 CSS 更改它，视频总是以相同的高度呈现，但在一个有空白空间的框架内。

为了让自己更清楚，我希望轮播显示视频的大小为 800x600 或与 youtube 上的类似。我不熟悉引导程序或轮播的使用，所以我想我错过了一些非常基本的东西......

提前感谢您的帮助！

Answer 1

好的，我只是使用错误的设置从 youtube 嵌入代码。可以预见的是，noobish 错误....！