響應式設計影片

使用 FitVid.js 為嵌入影片添入響應式設計 (適合 WordPress 及任何網頁)

jQuery外掛, WordPress, 響應式設計 /

在手機屏幕上， 您網頁上的影片是否會顯示錯誤尺寸？如果是，本文將指導如何將嵌入的影片變得合乎響應式設計。

響應式網頁設計對於把傳送網頁內容至不同屏幕尺寸的設備來說十分重要，令網頁元素的佈局和大小可以根據屏幕大小自動變更。讓用戶可以在桌上電腦和移動設備上加載相同的網頁，而無需通過獨立的 URL 來訪問手機版的頁面。大多數響應式設計只需要原生的 HTML5 和 CSS3 就可以構建得到。

但是，並非所有元素都能以這種方式做出響應式設計，例如嵌入影片。影片內容是經由外部來源提供，主要是影片平台（例如 YouTube）都是通過 iframe 元素允許將其影片嵌入到網頁中。這使得沒有辦法只運用 CSS 來更改影片尺寸，而同時保持影片的長寬比例。添加一些自定義的 CSS 代碼可使 iframe 的寬度依屏幕大小變化，但是不能夠相應地改變它的高度。

若您非技術人員，您應該在建立新網站時選擇完全支持響應式設計的主題。 例如，我採用了 Anchors 的 Rue 主題來建立我的 Tumblr 部落格好幾年。該主題包含針對嵌入影片的響應式設計，基於一個名為 FitVids.js 的輕量級 jQuery 插件。如果您會像我一樣分享許多 YouTube 影片，這項功能對您的網站來說必不可少。

如果您是使用 WordPress 而選用的主題沒有提供影片的響應式設計，您卻又不想轉換主題，則可以嘗試下文所提到的 FitVids 插件。

如果您懂一點網頁代碼，可以根據以下教學來將 FitVids.js 代碼插入到您的網站裏。這不是一個很難的程序，但至少需要您知道如何修改網站的主題，又或者在網頁內添加 HTML 代碼的方法。

在 WordPress 上使用 FitVids

這簡單！ 您可以從 WordPress.org 找到由 Kevin Dees 提供的免費的 FitVids for WordPress 插件。安裝插件後，您可以在 WordPress 後台打開 外觀 > FitVids 來修改設置。

您可以使用自定義選擇器來覆蓋自選的影片平台。例如，我們可以添加 Facebook 和 Dailymotion。如果您不了解如何修改選擇器，請閱讀以下部分以獲取更多詳細信息。

除非插件無法運作，不用勾選 Use Google CDN 選項。因為默認情況下，WordPress 已因本身的功能所需而預載了 jQuery 插件庫。多次請求 jQuery 會降低網頁速度。

[ 返回目錄 ]

在其他網頁平台上使用 FitVids.js

Dark Mode
使用 FitVid.js 為嵌入影片添入響應式設計 (適合 WordPress 及任何網頁) 2

FitVids.js (this link opens in a new window) by davatron5000 (this link opens in a new window)

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

189 Subscribers 4731 Watchers 1014 Forks Check out this repository on GitHub.com (this link opens in a new window)

您可以從 GitHub 找到由 Dave Rupert (@davatron5000) 管理的 FitVids.js。它的 README 文件指示 FitVid.js 依賴於 jQuery 1.7 或以上的版本。所以您需要在網站上加載這兩個程式庫，以一般會把它們插入到 HTML 的 head 之中：

HTML
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>

下載副本並將 .js 文件上傳到您的伺務器，然後修改路徑以連結您的託管文件。又或者，您可以將以下代碼複製到 HTML head 中，以從 免費 CDN 服務 cdnjs 入載它們。

HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>

接下來，您需要添加一個 jQuery 腳本，令當 DOM 準備就緒時執行 fitVids() 函數。我建議將代碼放在 footer 中，以防止渲染阻塞 (render-blocking)。 最簡單的方法是使用以下代碼將 HTML body 中的所有嵌入影片定為處理目標，

HTML
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $('body').fitVids();
  });
</script>

若您熟悉使用 CSS 選擇器，可以替換 body為 用容器 ID 或類別名稱。fitVids.js 將掃描每個目標容器中嵌入影片，然後將 iframe 元素包裝在 div.fluid-width-video-wrapper 之中，並對它們使出一些基於比例的 CSS 魔術。

[ 返回目錄 ]

使用 FitVids 的自定義選擇器增添額外的影片平台

若無自定義選手器傳給函數，在默認情況下 FitVids 只會對連結來源是包括 youtube.com 與 player.vimeo.com 的 iframe 元素執行處理。最近我在檢查我的部落格時，我發現某些嵌入的 YouTube 影片被正常調整大小，而其中一些影片則無法隨屏幕尺寸縮放。這個問題的因為那些影片是用了短網址 youtu.be 而不是 youtube.com 的網址來嵌入。要解決此問題，請將代碼修改為

JavaScript
$('body').fitVids({ 
  customSelector: 'iframe[src*="youtu.be"]'
});

您可以使用逗號分隔的列表來分配多個影片平台，例如：

JavaScript
$('body').fitVids({
  customSelector: 'iframe[src*="youtu.be"], iframe[src*="facebook.com"], iframe[src*="dailymotion.com"]'
});

[ 返回目錄 ]

常見問題和故障排除

通過 自定義選擇器 添加影片平台的根網域 URL。

FitVids 將影片的大小更改為其容器的整個寬度。 因此，可以嘗試添加自定義 CSS 來修改父系元素 div.fluid-width-video-wrapper 的邊距，內邊距和寬度。

如果要排除特定的嵌入影片，可以使用 ignore 選項來過濾指派的 CSS 類別。

JavaScript
$('body').fitVids({ ignore: '.no-fitvids'});
// Selectors are comma separated, just like CSS

根據自述文件 FitVid.js 存在以下問題，

Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay.

[ 返回目錄 ]

我希望這個 FitVids 教學能夠幫助你為網站上的嵌入影片添加響應式設計。如果您還有其他問題，請隨時在下面的留言發問。

如果您喜歡這篇文章，請分享到您的 Facebook 和 Twitter。您也可以通過 Ko-fi 捐款支持本站。

圖片來源：照片作者 Sara Kurfeß 來自 Unsplash

Scroll to Top