流體寬度視頻

在響應式和流體網頁佈局盛行的今天，有一種媒體類型阻礙了完美的和諧：視頻。網站上視頻的顯示方式有很多種。您可能自行託管視頻，並通過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中文網其他相關文章！