在響應(yīng)式和流體網(wǎng)頁布局盛行的今天，有一種媒體類型阻礙了完美的和諧：視頻。網(wǎng)站上視頻的顯示方式有很多種。您可能自行托管視頻，并通過 HTML5 <video></video> 標簽顯示；也可能使用 YouTube、Vimeo 或其他提供 <iframe></iframe> 代碼來顯示視頻的視頻提供商。讓我們來看看如何在保持適當(dāng)?shù)目v橫比的同時，使所有視頻都具有流體寬度。

在這些視頻嵌入場景中，聲明靜態(tài)寬度和高度非常常見。

<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>

猜猜看？在流體寬度環(huán)境中聲明靜態(tài)寬度不是一個好主意。如果該視頻的父容器縮小到小于聲明的 400 像素，會發(fā)生什么？它會溢出，看起來可能很荒謬和尷尬。

那么我們不能只這樣做嗎？

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

是的，您可以！如果您使用的是標準 HTML5 視頻，這將使視頻適應(yīng)容器的寬度。重要的是，當(dāng)您這樣做時，請刪除高度聲明，以便在視頻增長和縮小時保持其縱橫比，以免出現(xiàn)填充空白空間的尷尬“條形”（與圖像不同，無論元素的大小如何，實際視頻都會保持其縱橫比）。

您可以通過 CSS（而不必擔(dān)心 HTML 中聲明的內(nèi)容）來實現(xiàn)這一點：

video {
  /* 覆蓋其他樣式以實現(xiàn)響應(yīng)式 */
  width: 100% !important;
  height: auto !important;
}

<iframe></iframe> 視頻（YouTube、Vimeo 等）

當(dāng)處理通過 <iframe></iframe> 傳送的視頻時，我們上面的技巧將無濟于事。強制寬度為 100% 是有效的，但是當(dāng)我們設(shè)置 height: auto 時，我們最終會得到 150 像素¹ 的靜態(tài)高度，這對于大多數(shù)視頻來說都太矮了，并且會造成更多 R&E（荒謬和尷尬）。

幸運的是，這里有幾個可能的解決方案。其中一個是由 Thierry Koblentz 首創(chuàng)的，并在 2009 年的 A List Apart 上發(fā)表：為視頻創(chuàng)建固有比例。使用此技術(shù)，您將視頻包裝在另一個具有固有縱橫比的元素中，然后在該元素內(nèi)絕對定位視頻。這使我們能夠獲得流體寬度和我們可以依靠的合理高度。

<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 調(diào)整縱橫比，例如：

<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 { }

但是……縱橫比、舊內(nèi)容、非技術(shù)用戶等等

上述技術(shù)很棒，但它有一些可能的局限性：

1. 它需要一個包裝器元素，因此直接從 YouTube 復(fù)制和粘貼代碼是不行的。用戶需要更精明一些。
2. 如果您有舊內(nèi)容并且正在重新設(shè)計為流體，則所有舊視頻都需要進行 HTML 調(diào)整。
3. 所有視頻都需要相同的縱橫比。否則，它們將被強制轉(zhuǎn)換為不同的縱橫比，您將得到“條形”。或者，您將需要一個可以應(yīng)用的類名工具箱來進行調(diào)整，這會增加額外的復(fù)雜性。

如果這些限制中的任何一個適用于您，您可能需要考慮使用 JavaScript 解決方案。

想象一下：頁面加載時，會查看所有視頻并保存其縱橫比。立即執(zhí)行一次，以及每當(dāng)窗口大小調(diào)整時，所有視頻都會調(diào)整大小以填充可用寬度并保持其縱橫比。使用 jQuery JavaScript 庫，它看起來像這樣：

// 查找所有 YouTube 視頻
// 為 Vimeo 和任何其他內(nèi)容擴展該選擇器
var $allVideos = $("iframe[src^='//www.youtube.com']"),

  // 流體寬度的元素
  $fluidEl = $("body");

// 計算并保存每個視頻的縱橫比
$allVideos.each(function() {

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

    // 并刪除硬編碼的寬度/高度
    .removeAttr('height')
    .removeAttr('width');

});

// 當(dāng)窗口大小調(diào)整時
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // 根據(jù)每個視頻的縱橫比調(diào)整所有視頻的大小
  $allVideos.each(function() {

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

  });

// 啟動一次調(diào)整大小以修復(fù)頁面加載時的所有視頻
}).resize();

這就是 FitVids.js 的由來

除了處理所有這些調(diào)整大小的工作之外，F(xiàn)itVids.js 還會循環(huán)遍歷所有視頻，并添加啟用縱橫比的 HTML 包裝器和必要的 CSS。這比需要綁定到窗口大小調(diào)整處理程序要高效得多！

改為使用純 JavaScript

如今，jQuery 已經(jīng)不太流行了。幸運的是，Dave 有一個 Vanilla 版本（需要自備 CSS）：

1. 實際上，如果未另行聲明，所有瀏覽器都會將 iframe、canvas、embed 和 object 標簽呈現(xiàn)為 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.

以上是流體寬度視頻的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！