当我们在编写响应式网页时，如何让视频、音频等媒体元素在不同设备上呈现出最佳效果是一个比较棘手的问题。传统的解决方案是使用 CSS 的 padding 或 width 属性来控制元素尺寸，但这种方式会导致媒体内容变形或者失真。
近年来，流体网格布局（fluid grid layout）得到了广泛的应用。与之配套的，流体嵌入式媒体（fluid embedded media）技术也逐渐成熟。其中，npm 包 fluidvids.js 就提供了一种简单易用的实现方案。
安装和引用
要使用 fluidvids.js，首先需要通过 npm 进行安装：
npm install fluidvids --save
然后，在 HTML 文件中引入 fluidvids.min.js 文件：
<script src="node_modules/fluidvids/dist/fluidvids.min.js"></script>
初始化
在页面加载完毕后，我们需要初始化 fluidvids.js。在初始化之前，我们需要指定需要进行流体嵌入式媒体处理的元素选择器。例如，假设我们要对所有 class 为 video 的 iframe 元素进行处理：
const selector = '.video iframe';
fluidvids.init({selector: selector});我们可以通过 init 方法指定元素选择器，该方法接收一个对象作为参数。除了 selector 属性之外，还有其他几个可选属性：
players：该属性是一个数组，用于指定需要支持的嵌入式媒体平台。默认情况下，fluidvids.js支持 YouTube、Vimeo 和 Kickstarter 等平台。options：该属性是一个对象，用于指定其他的配置选项。例如，我们可以通过options属性来指定视频的最大宽度和高度等参数。
示例代码
下面是一个完整的示例代码，展示了如何使用 fluidvids.js 对页面中的视频进行处理：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
-------
------
---- -- ---- -- ---
---- --------------
------- ---------------------------------------------------------
------
---- -- ---------------- -- ---
------- ------------------------------------------------------------
--------
-- --- ------------
----- -------- - ------- --------
------------------------- -----------
---------
-------
-------上述代码中，我们针对 class 为 video 的 iframe 元素进行了流体嵌入式媒体处理。由于该 iframe 中引入了 YouTube 视频，因此在页面缩放时，该视频的宽度和高度会自动调整，以达到最佳的显示效果。
总结
本文介绍了如何使用 npm 包 fluidvids.js 来实现流体嵌入式媒体。我们首先安装了该包，并在 HTML 文件中引入了相关的 JS 文件。然后，我们演示了如何通过 init 方法来初始化 fluidvids.js，并对指定的元素进行流体嵌入式媒体处理。最后，我们给出了一个完整的示例代码，帮助读者更好地理解如何使用 fluidvids.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37035