尝试将视频放入引导轮播中.但是当我将位置设置为固定时消失了

Question

我试图将视频放在引导卡罗塞尔中。我正在尝试移动视频，使其适合特定响应高度的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;; 
}

这是我的小提琴：

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

Answer 1

我认为这就是视频"消失"的原因：当您制作视频fixed时，它会获得一个新的堆叠上下文，将其从正常流程中取出。由于轮播中的每个元素都在<div class="item">内部，并且此div 本身没有高度（它会根据其内容增长），由于视频现在超出了正常流程，因此div 会失去其高度。

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

我为div 添加了一个固定高度：

.item {
  height: 500px;
}

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