从响应式视频中删除黑色边框 Bootstrap 4答案

【问题标题】：Remove the black borders from a responsive video Bootstrap 4从响应式视频中删除黑色边框 Bootstrap 4
【发布时间】：2020-10-10 10:32:28
【问题描述】：

我想从视频中删除黑色边框并保持响应。我正在使用引导程序 4.5。我还想保持视频的全景分辨率为 1920x764。我几乎可以肯定问题与分辨率有关。然后我应该编辑引导 .css 文件吗？

<body>
    <!-- Video -->
    <!-- XLG/LG - 21:9 aspect ratio -->
    <div class="d-none d-lg-block embed-responsive embed-responsive-21by9 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- MD - 16:9 aspect ratio -->
    <div class="d-none d-md-block d-lg-none embed-responsive embed-responsive-16by9 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- SM - 4:3 aspect ratio -->
    <div class="d-none d-sm-block d-md-none embed-responsive embed-responsive-4by3 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- XSM - 1:1 aspect ratio -->
    <div class="d-block d-sm-none embed-responsive embed-responsive-1by1 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- Video -->

    <!-- Javascript files -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

</body>

您知道我该如何解决吗？谢谢！

【问题讨论】：

您是否尝试过内联样式并将border: none 应用于您所需的元素？
@ElysianStorm 是的，我做到了，它不起作用

标签： html css twitter-bootstrap video bootstrap-4

【解决方案1】：

我们可以看到，Bootstrap 4 有一个embed aspect ratios 列表。此列表中.embed-responsive-21by9 的比例在 BS CSS 中以这种方式确定：

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

看来您的分辨率不太标准。让我们为您的 CSS（或 Bootstrap）添加一个新类。可以说它将是.embed-responsive-19by7。 1920=100%, 764=39.7916%（使用比例 764 * 100 / 1920 = 36.79166）。所以你的额外CSS是

.embed-responsive-19by7::before {
  padding-top: 39.7916%;
}

现在您的视频将是

<!-- panoramic - 19:7 aspect ratio -->
    <div class="d-none d-lg-block embed-responsive embed-responsive-19by7 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>

【讨论】：

ooo 非常感谢，这解决了我的问题。你是如何计算填充的？
就像我在回答中所说，如果 1920 是 100%，那么 764 是 39.7916%。简单的比例。 764*100/1920=36.79166