引导主题嵌入iframes被扭曲

Question

我试图将视频嵌入到页面上，但它们显示的都是拉伸的视频。这是应该是什么样子和这就是它现在的样子。

以下是我的嵌入代码：

<iframe width="100%" src="https://www.youtube.com/embed/Fj5O0V9WWug?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

..。但是，看起来默认的css可能会扰乱比例。

.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

删除上面的css会使视频消失。有什么建议可以解释为什么视频看上去很紧张吗？

Answer 1

你可以通过添加一些像这一个这样的免费插件来实现这一点。这个插件使用FitVids.js使你的视频流畅的宽度。有更多类似的插件免费提供，这将允许您这样做，而不添加任何CSS。