使用FitVid.js為嵌入影片添入響應式設計(適合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

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

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

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

若您熟悉使用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 的網址來嵌入。要解決此問題，請將代碼修改為

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

[ 返回目錄 ]

常見問題和故障排除

[ 返回目錄 ]

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

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

---

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