如何使用FitVids在WordPress中使视频具有响应性

2020-12-23
WordPress

当您将视频嵌入WordPress时，默认情况下，这些视频没有响应。随着响应式WordPress主题的兴起，在较小的屏幕上访问您的网站的用户将看到拉伸且比例过高的视频容器。在本文中，我们将向您展示如何使用FitVids在WordPress中响应视频。

FitVids是一个jQuery插件，可让您使视频嵌入响应。如果您想在WordPress网站上使用它，那么您要做的就是安装并激活FitVids for WordPress插件。激活后，您需要转到外观»FitVids并输入CSS选择器类。WordPress自动将.post类添加到文章中，因此您可以使用它。

就这样，保存您的更改并预览您的网站。您需要重新调整浏览器屏幕的大小，才能看到视频进行相应调整。

手动添加FitVids以使您的视频在WordPress中具有响应性

如果您不想安装适用于WordPress的FitVids插件，则可以手动添加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寻找.postCSS选择器类。现在您已经准备好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);