流体宽度视频

在响应式和流体网页布局盛行的今天，有一种媒体类型阻碍了完美的和谐：视频。网站上视频的显示方式有很多种。您可能自行托管视频，并通过 HTML5 <video></video> 标签显示；也可能使用 YouTube、Vimeo 或其他提供 <iframe></iframe> 代码来显示视频的视频提供商。让我们来看看如何在保持适当的纵横比的同时，使所有视频都具有流体宽度。

在这些视频嵌入场景中，声明静态宽度和高度非常常见。

<video ...="" controls="" height="300" width="400"></video>
<iframe ...="" height="300" width="400"></iframe>
<object ...="" height="300" width="400"></object>
<embed ...="" height="300" width="400"></embed>

猜猜看？在流体宽度环境中声明静态宽度不是一个好主意。如果该视频的父容器缩小到小于声明的 400 像素，会发生什么？它会溢出，看起来可能很荒谬和尴尬。

那么我们不能只这样做吗？

<video ...="" width="100%"></video>

是的，您可以！如果您使用的是标准 HTML5 视频，这将使视频适应容器的宽度。重要的是，当您这样做时，请删除高度声明，以便在视频增长和缩小时保持其纵横比，以免出现填充空白空间的尴尬“条形”（与图像不同，无论元素的大小如何，实际视频都会保持其纵横比）。

您可以通过 CSS（而不必担心 HTML 中声明的内容）来实现这一点：

video {
  /* 覆盖其他样式以实现响应式 */
  width: 100% !important;
  height: auto !important;
}

<iframe></iframe> 视频（YouTube、Vimeo 等）

当处理通过 <iframe></iframe> 传送的视频时，我们上面的技巧将无济于事。强制宽度为 100% 是有效的，但是当我们设置 height: auto 时，我们最终会得到 150 像素¹ 的静态高度，这对于大多数视频来说都太矮了，并且会造成更多 R&E（荒谬和尴尬）。

幸运的是，这里有几个可能的解决方案。其中一个是由 Thierry Koblentz 首创的，并在 2009 年的 A List Apart 上发表：为视频创建固有比例。使用此技术，您将视频包装在另一个具有固有纵横比的元素中，然后在该元素内绝对定位视频。这使我们能够获得流体宽度和我们可以依靠的合理高度。

<div class="videoWrapper">
  <iframe allowfullscreen="" frameborder="0" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" width="560"></iframe>
</div>

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

有一个巧妙的改编方法允许您直接从 HTML 调整纵横比，例如：

<div style="--aspect-ratio: 3 / 4;">
  <iframe ...></iframe>
</div>

.videoWrapper {
  ...
  /* 回退到 16/9，否则使用来自 HTML 的比例 */
  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
}

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object { }

但是……纵横比、旧内容、非技术用户等等

上述技术很棒，但它有一些可能的局限性：

1. 它需要一个包装器元素，因此直接从 YouTube 复制和粘贴代码是不行的。用户需要更精明一些。
2. 如果您有旧内容并且正在重新设计为流体，则所有旧视频都需要进行 HTML 调整。
3. 所有视频都需要相同的纵横比。否则，它们将被强制转换为不同的纵横比，您将得到“条形”。或者，您将需要一个可以应用的类名工具箱来进行调整，这会增加额外的复杂性。

如果这些限制中的任何一个适用于您，您可能需要考虑使用 JavaScript 解决方案。

想象一下：页面加载时，会查看所有视频并保存其纵横比。立即执行一次，以及每当窗口大小调整时，所有视频都会调整大小以填充可用宽度并保持其纵横比。使用 jQuery JavaScript 库，它看起来像这样：

// 查找所有 YouTube 视频
// 为 Vimeo 和任何其他内容扩展该选择器
var $allVideos = $("iframe[src^='//www.youtube.com']"),

  // 流体宽度的元素
  $fluidEl = $("body");

// 计算并保存每个视频的纵横比
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // 并删除硬编码的宽度/高度
    .removeAttr('height')
    .removeAttr('width');

});

// 当窗口大小调整时
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // 根据每个视频的纵横比调整所有视频的大小
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// 启动一次调整大小以修复页面加载时的所有视频
}).resize();

这就是 FitVids.js 的由来

除了处理所有这些调整大小的工作之外，FitVids.js 还会循环遍历所有视频，并添加启用纵横比的 HTML 包装器和必要的 CSS。这比需要绑定到窗口大小调整处理程序要高效得多！

改为使用纯 JavaScript

如今，jQuery 已经不太流行了。幸运的是，Dave 有一个 Vanilla 版本（需要自备 CSS）：

1. 实际上，如果未另行声明，所有浏览器都会将 iframe、canvas、embed 和 object 标签呈现为 300 像素 × 150 像素。即使这不在 UA 样式表中。

The output maintains the original image and its format. The text has been paraphrased and reorganized for improved flow and readability while preserving the original meaning.

以上是流体宽度视频的详细内容。更多信息请关注PHP中文网其他相关文章！