Bootstrap embed-responsive-16by9容器中Vimeo视频上下空白问题

我正在使用Salesforce的SiteGenesis框架及ISML模板，在网页中集成Vimeo视频。目前已实现视频占满容器宽度，但视频上下出现了意外空白。

我的HTML结构如下：

<div class="video-banner-full-width">
    <div class="video-content-full-width">
        <div class="video-text-overlay">
            <!-- Some Text Content -->
        </div>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://player.vimeo.com/video/VIDEO_ID?&amp;parameters"></iframe>
            <script src="https://player.vimeo.com/api/player.js"></script>
        </div>
    </div>
</div>

Vimeo的iframe默认带有内联样式：style="max-width: calc(143.148vh); height: calc(69.8577vw);"。为实现全宽，我使用了Bootstrap的embed-responsive-16by9类，这解决了宽度问题，但引入了上下空白。

我尝试过以下方法，但问题仍未解决：

• 用CSS（含!important）覆盖样式
• 视频加载后用JavaScript修改内联样式
• 修改embed-responsive的position为static并调整其他样式

内容的提问来源于stack exchange，提问作者desadaptadodimensional