如何使用 FitVids 在 WordPress 中使您的視頻具有響應(yīng)式

當(dāng)您在 wordpress 中嵌入視頻時(shí)，默認(rèn)情況下這些視頻不響應(yīng)。隨著響應(yīng)式 WordPress 主題的興起，在較小屏幕上訪問(wèn)您網(wǎng)站的用戶將看到拉伸且不成比例的視頻容器。在本文中，我們將向您展示如何使用 fitvids 讓您的視頻在 wordpress 中實(shí)現(xiàn)響應(yīng)式。

/>

FitVids 是一個(gè) jquery 插件，可讓您的視頻嵌入響應(yīng)式。如果您想在 WordPress 網(wǎng)站上使用它，那么您所需要做的就是安裝并激活FitVids for wordpress插件。激活后，您需要轉(zhuǎn)到外觀?FitVids并輸入css選擇器類(lèi)。WordPress 會(huì)自動(dòng).post為文章添加類(lèi)，因此您可以直接使用它。

就這樣，保存您的更改并預(yù)覽您的網(wǎng)站。您需要重新調(diào)整瀏覽器屏幕的大小才能看到視頻進(jìn)行相應(yīng)的調(diào)整。

視頻教程

https://www.youtube.com/embed/df1SAtdgDIk?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&JSh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您不喜歡該視頻或需要更多說(shuō)明，請(qǐng)繼續(xù)閱讀。

手動(dòng)添加 FitVids 以使您的視頻在 WordPress 中具有響應(yīng)能力

如果您不想安裝 FitVids for WordPress 插件，則可以手動(dòng)添加 FitVids jQuery 插件。您需要做的第一件事是下載FitVids jQuery 插件并將其解壓到您的計(jì)算機(jī)上。現(xiàn)在您需要將提取的FitVids.js-master文件夾上傳到主題的 js 目錄。

您需要使用 Filezilla 等 FTP 客戶端連接到您的網(wǎng)站并打開(kāi)您的主題目錄。您的 WordPress 主題可能沒(méi)有 js 文件夾。如果不存在，那么您需要?jiǎng)?chuàng)建一個(gè)，然后從您的計(jì)算機(jī)上傳 FitVids.js-master 文件夾。

在 js 文件夾中，您需要?jiǎng)?chuàng)建一個(gè)新文件并將其命名為FitVids.js.?編輯此文件并將此代碼粘貼到其中。

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

由

在 WordPress 中一鍵使用

上面的代碼告訴 FitVids 尋找.postcss 選擇器類(lèi)。現(xiàn)在您已準(zhǔn)備好 FitVids，是時(shí)候在您的 WordPress 主題中正確添加 JavaScript 了。

只需將以下代碼復(fù)制并粘貼到主題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 中一鍵使用

一旦你這樣做了，你就完成了。您已成功使您的 WordPress 視頻具有響應(yīng)能力。