#029: 集成 FitVids.js

图像并不是唯一需要在我们的灵活网格中良好播放的媒体。与视频相比，图像很简单！当您设置 <img> 的 width 并将其 height 值覆盖为 auto 时，图像将自然地保留其纵横比。这对于 <video> 也是如此，但说实话，如今网络上的大多数视频都是通过 <video> 标签直接嵌入页面的。

举个例子，我尝试在小屋里这样做，最后放弃了，因为 Vimeo Pro 更加实用（适用于任何设备、不错的播放器、便宜、快速流媒体等）。您不会（通常）通过 <video> 标签嵌入 Vimeo 视频，而是使用他们提供的嵌入代码，这是一个 <iframe>。YouTube 和许多其他流行的视频服务也使用这种方式。

iframe 在调整大小方面不会像图像那样保持其纵横比。但是，我们可以通过测试其宽度和高度并除以它们来找出其原始纵横比。然后，我们可以使用这些信息创建一个具有相同纵横比的盒子（使用填充技巧，参见 Uncle Dave’s Ol’ Padded Box），并将 iframe 绝对定位在其中。参见：Intrinsic Ratios for Videos。这样，当我们调整宽度和高度时，视频基本上就像图像一样，尊重其纵横比。

或者，我们可以使用 FitVids.js（我帮助编写了它）来自动化整个过程（它实际上只做我描述的，只是自动完成）。我们将此库包含在我们的 global.js 中，与我们对 prism.js 所做的一样进行连接。我们第一次需要 jQuery，因此我们从 ScriptSrc 获取该链接，并在我们的 global.js 之前的页脚中链接它。然后在我们的 global.js 中，我们调用 FitVids。完成。