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

wordpress响应慢

When you embed a video in WordPress, by default these videos are not responsive. With the rise of responsive WordPress themes, users visiting your site on smaller screens will see video containers that are stretched and disproportionate. In this article, we will show you how to make your videos responsive in WordPress with FitVids.

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

FitVids is a jQuery plugin which allows you to make your video embeds responsive. If you want to use it on your WordPress site, then all you need to do is install and activate FitVids for WordPress plugin. After activation, you need to go to Appearance » FitVids and enter a CSS selector class. WordPress automatically adds .post class to the articles, so you can just use that.

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

That’s all, save your changes and preview your site. You would need to re-size browser screen to see videos adjusting themselves accordingly.

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

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

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

手动添加FitVids以使您的视频在WordPress中具有响应性 (Manually Add FitVids to Make Your Videos Responsive in WordPress)

If you don’t want to install the FitVids for WordPress plugin, then you can add FitVids jQuery plugin manually. First thing you need to do is download and extract FitVids jQuery plugin to your computer. Now you need to upload the extracted FitVids.js-master folder to your theme’s js directory.

如果您不想安装适用于WordPress的FitVids插件，则可以手动添加FitVids jQuery插件。 您需要做的第一件事是将FitVids jQuery插件下载并解压缩到您的计算机中。 现在，您需要将提取的FitVids.js-master文件夹上载到主题的js目录。

You need to connect to your website using an FTP client like Filezilla and open your theme directory. It is possible that your WordPress theme may not have a js folder. If it is not there, then you need to create one and then upload FitVids.js-master folder from your computer.

您需要使用FTP客户端(例如Filezilla)连接到您的网站，然后打开主题目录。 您的WordPress主题可能没有js文件夹。 如果不存在，则需要创建一个文件夹，然后从计算机上载FitVids.js-master文件夹。

Inside the js folder, you need to create a new file and name it FitVids.js. Edit this file and paste this code inside it.

在js文件夹中，您需要创建一个新文件并将其命名为FitVids.js 。 编辑此文件并将此代码粘贴到其中。

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

The above code tells FitVids to look for .post CSS selector class. Now that you got FitVids ready, it is time to properly add javascripts in your WordPress theme.

上面的代码告诉FitVids寻找.post CSS选择器类。 现在您已经准备好FitVids，是时候在WordPress主题中正确添加javascript了。

Simply, copy and paste the following code in your theme’s functions.php file:

只需将以下代码复制并粘贴到主题的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);

Once you do that, you’re done. You have successfully made your WordPress videos responsive.

一旦完成，就完成了。 您已成功使WordPress视频具有响应能力。

We hope that you found this article useful. For feedback and questions please feel free to leave a comment below or join us on Twitter and Google+.

我们希望您觉得本文有用。 有关反馈和问题，请随时在下面发表评论，或在Twitter和Google+上加入我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-make-your-videos-responsive-in-wordpress-with-fitvids/

wordpress响应慢