如何使用FitVids在WordPress中使視頻具有響應性


當您將視頻嵌入WordPress時,默認情況下,這些視頻沒有響應。 隨著響應式WordPress主題的興起,在較小屏幕上訪問您的網站的用戶將看到拉伸且比例過高的視頻容器。 在本文中,我們將向您展示如何使用FitVids在WordPress中響應視頻。

默認無響應和響應視頻嵌入WordPress

FitVids是一個jQuery插件,可讓您使視頻嵌入響應。 如果您想在WordPress網站上使用它,那麼您要做的就是安裝並激活FitVids for WordPress插件。 激活後,您需要轉到 外觀»FitVids 並輸入CSS選擇器類。 WordPress自動添加 .post 類的文章,所以您可以使用它。

FitVids for WordPress插件設置

就這樣,保存您的更改並預覽您的網站。 您需要重新調整瀏覽器屏幕的大小,才能看到視頻進行相應調整。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

手動添加FitVids以使您的視頻在WordPress中具有響應性

如果您不想安裝FitVids for WordPress插件,則可以手動添加FitVids jQuery插件。 您需要做的第一件事是將FitVids jQuery插件下載並解壓縮到您的計算機中。 現在您需要上傳提取的 FitVids.js-master 文件夾到主題的js目錄。

您需要使用FTP客戶端(如Filezilla)連接到您的網站,然後打開主題目錄。 您的WordPress主題可能沒有js文件夾。 如果不存在,則需要創建一個文件夾,然後從計算機上載FitVids.js-master文件夾。

在js文件夾中,您需要創建一個新文件並將其命名 FitVids.js。 編輯此文件並將此代碼粘貼到其中。

(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post").fitVids();
  });
  
  })(jQuery);

上面的代碼告訴FitVids尋找 .post CSS選擇器類。 現在您已經準備好FitVids,是時候在WordPress主題中正確添加javascript了。

只需將以下代碼複製並粘貼到主題的 functions.php 文件:

wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE); 

wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE);

一旦完成,就完成了。 您已成功使WordPress視頻具有響應能力。

我們希望您覺得本文有用。 對於反饋和問題,請隨時在下面發表評論或加入我們 推特 和Google+。