Boostrap视频轮播高度

我在我的代码中实现了这个bootstrap视频轮播：

<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的视频 . 我不熟悉bootstrap或使用旋转木马，所以我想我错过了一些非常基本的东西......

在此先感谢您的帮助！