html - 视频 - Bootstrap 模态不显示全屏按钮

Question

我们正面临这个问题。

首先，我将尽可能多地解释我们在这个元素中的工作方式。

我们有一个演示页面，另一个是我们分别拥有演示页面的每个元素，称为模块。这是因为其他客户在构建“真实”页面时可以更轻松地工作。

话虽如此，我们在演示页面中包含了一个视频。在我们的模块中，视频有一个“全屏”按钮，但在我们的演示中没有。
我们不得不说，在我们的模块中，我们从 bootsrap 制作了一个“假”模态，只是为了向客户展示模态打开后应该是什么样子。但是一旦我们将它包含在我们的演示页面中，这个按钮就不会出现了。我们认为这可能是因为 Bootstrap 的模态阻止显示它，但我们不确定。这里我们留下一些来 self 们的模块和演示的图像。

模块:

演示:

HTML:

<div class="modal-body">
    <div class="ver-video">
        <video controls >
          <source src="video/video-finanzas.mp4" type="video/mp4">
          <source src="video/video-finanzas.ogv" type="video/ogv">
          <source src="video/video-finanzas.webm" type="video/webm">
            Tu navegador no soporta el video
        </video>
    </div>
    <div class="container-fluid wrapper-content">
        <img src="img/icn-step2-incorrecto.png">
        <h4>Text</h4>
        <h5>More text</h5>
        <p>More text</p>
        <a href="#" class="btn-onboarding" target="_top">Link</a>
    </div>
</div>

CSS:

.modal-onboarding .ver-video {
    background-image: url("../img/Step2_Resposta.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 220px;
    position: relative;
}
.modal-onboarding .ver-video video{
    width: 100%;
    height: 100%;
}

正如我所说，我们不知道为什么按钮会消失。也许是因为引导模式阻止显示它？如果是这样，解决方案是什么？从一页到另一页的代码是相同的，复制粘贴。

Answer 1

据我所知，在 Firefox 和 Chrome 中，frame 标签内的 HTML5 video 标签将使该按钮消失。我只是在使用和不使用 frame 的情况下对其进行了测试，结果确实如此。