HTML5＆amp; Bootstrap 4响应iframe视频高度太小

Question

我正在尝试将带有Vimeo视频的响应式iframe嵌入到我的网站中。问题是，当我加载页面时，iframe太短，因此会切断视频的时间线，暂停和播放按钮，如下所示：

以前，我有一个margin-top:4.6em;应用于我的CSS中的iframe，以便将下一个容器推送到视图下方，我将其删除，因为我认为这可能是问题所在。它解决了离线站点上的高度问题，但在线版本仍然可以解决。 （离线网站）

我在谷歌浏览器上运行它，我的代码如下：

<div class="row">
    <div class="col-md-5 offset-md-4 col-xs-10 offset-xs-1 text-xs-center">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe height="100%" class="embed-responsive-item" src="https://player.vimeo.com/video/168167917"  allowfullscreen></iframe>
        </div>
    </div>
</div>

这是我的CSS（虽然不是很相关）：

body {
    background-image: url(/img/pic.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    padding-top:70px;
}
.footer {
    margin-left:1em;
    color:#000000;
    font-size:1.5em;
    -webkit-text-stroke:.5px #000000;
}

我正在使用当前maxCDN，Google和netdna CDN中的Bootstrap 4.0.0 Alpha 5。有人能帮助我吗？