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

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

WordPress 中默认的非响应式和响应式视频嵌入

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

FitVids for WordPress 插件设置

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

视频教程

订阅 WPBeginner

如果您不喜欢该视频或需要更多说明,请继续阅读。

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

如果您不想安装 FitVids for WordPress 插件,那么您可以手动添加 FitVids jQuery 插件。您需要做的第一件事是下载FitVids jQuery 插件并将其提取到您的计算机。现在您需要将提取的FitVids.js-master文件夹上传到主题的 js 目录。

您需要使用Filezilla 等FTP 客户端连接到您的网站并打开您的主题目录。您的 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 主题中正确添加 javascripts了。

只需将以下代码复制并粘贴到您的主题functions.php文件中:

wp_enqueue_script(‘fitvids’, get_template_directory_uri() . ‘https://cdn3.wpbeginner.com/js/FitVids.js-master/jquery.fitvids.js’, array(‘jquery’), ”, TRUE);  wp_enqueue_script(‘fitvids-xtra’, get_template_directory_uri() . ‘https://cdn4.wpbeginner.com/js/FitVids.js’, array(), ”, TRUE);

一旦你这样做了,你就完成了。您已成功使您的 WordPress 视频具有响应性。

我们希望您发现这篇文章很有用。如需反馈和问题,请随时在下方发表评论或在Twitter和Google+上加入我们。