Question

我在我的代码中实现了这个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的尺寸或类似的方式显示视频。我不熟悉bootstrap或使用旋转木马，所以我想我错过了一些非常基本的东西......

提前感谢您的帮助！

Answer 1

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

Boostrap视频轮播高度

1 个答案: