html - 尝试将视频放入 Bootstrap 轮播中。但是当我将位置设置为固定时消失

Question

我正在尝试将视频放入 bootstrap 轮播中。我正在尝试移动视频，使其适合特定响应高度的 div，而不是视频本身的尺寸。

但是当我固定视频位置时它就消失了。我不确定这里发生了什么。

HTML

            <video class="videoInsert" autoplay loop poster="~/Content/video/posters/b-roll-1.jpg" muted>
                <source src="https://broken-links.com/tests/media/BigBuck.webm" type="video/webm">
                <source src="https://broken-links.com/tests/media/BigBuck.m4v" type="video/mp4" />
                Your browser does not support the video tag.
            </video>

        </div>



    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- /.carousel -->

CSS

#myCarousel {
    overflow: hidden;
}
.videoInsert {
    position: fixed;
    -webkit-transform: translateZ(0);
    right: 0; 
    bottom: 0;
    top: 0;
    margin-top: 0;
    min-width: 100%; 
    min-height: 100%;
    width: 100%; 
    height: 100%; 
    background-size: cover;
    overflow: hidden;
    z-index: 1000;; 
}

这是我的 fiddle :

https://jsfiddle.net/neosketo/f1fa1ksj/4/

Answer 1

我认为这就是视频“消失”的原因:当您制作视频时 fixed它获得了一个新的堆叠上下文，将其从他通常所在的正常流程中移除。由于轮播中的每个元素都在 <div class="item"> 中并且这个 div 本身没有高度(它根据它的内容增长)，因为视频现在不在正常流中，div 失去了它的高度。

在这里，我更新了您的演示:https://jsfiddle.net/f1fa1ksj/6/

我给 div 添加了一个固定的高度:

.item {
  height: 500px;
}

你还必须记住有几个overflow: hidden;轮播的 css 中的属性，例如:.carousel-inner和 #myCarousel .这可能会影响视频的可见性，具体取决于您为其应用的 CSS。