README

一个轻量级、易于使用的 jQuery 插件，用于实现流体宽度视频嵌入。

FitVids 自动化 Thierry Koblentz 的内禀比率方法，以实现在响应式网页设计中的流体宽度视频。

如何使用它？

在您的布局中包含 jQuery 1.7+ 和 FitVids.js，并使用 fitVids() 函数针对视频容器。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

这将使每个视频包裹在一个 div.fluid-width-video-wrapper 中，并应用必要的 CSS。在初始 JavaScript 调用后，它就变成了基于百分比的 CSS 魔法。

当前支持的播放器

* 表示对这些播放器的原生支持可能会被弃用。如果您的视频平台目前不受支持，请尝试通过 customSelector 添加...

添加您自己的视频供应商

您有自定义的视频播放器吗？我们现在有一个 customSelector 选项，您可以在其中添加您自己的特定视频供应商选择器（具体效果可能因供应商和播放器的流畅度而异）

  $("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
  // Selectors are comma separated, just like CSS

注意： 这将是添加您自己的自定义供应商以及测试您的播放器与 FitVids 兼容性的最快方式。

使用类忽略

如果您希望 FitVids 忽略某个视频，您可以在对象或容器上添加一个 fitvidsignore 类，您的视频将按定义显示。

如果您想添加一个自定义块以忽略 FitVids，请使用 ignore 选项。

  $("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});
  // Selectors are comma separated, just like CSS

针对没有类或容器的嵌入视频

客户/客户有时会将视频添加到通用内容区域或文章中，这可能是没有您正在针对的类或容器。一个解决方案是使用类似以下的方法针对视频的父元素；

  $('iframe[src*="youtube"]').parent().fitVids();
  // You can change the selector to suit potential video providers, or chain them if your customer is likely to use more than one provider

通过针对 iframe/embed 的父元素，您可以在飞行中动态添加 fitVids 的特殊调料，而不需要事先知道容器。

已知问题

Vimeo 自动播放 API 与 FitVids 在 IE11 中不兼容。您必须手动包裹您想要自动播放的视频。

uninhabited / fitvids.js

维护者

详细信息