Как сделать ваши видео адаптивными в WordPress с FitVids

Когда вы встраиваете видеоролики в WordPress, по-умолчанию эти видео не являются адаптивными (резиновыми). И когда разрешение экрана меняется, к примеру при просмотре с планшета или мобильного телефона (смартфон), то видео не ужимаются по ширине. С ростом количества резиновых тем WordPress пользователи, посещающие ваш сайт с устройств с маленьким разрешением экрана, увидят ваши видео растянутыми и не соразмерными. В этой статье мы покажем вам как сделать ваши видео адаптивными в WordPress с FitVids.

FitVids — это jQuery плагин, который позволяет вам сделать ваши встроенные видео адаптивными. Если вы хотите использовать его на своем сайте на WordPress, тогда все что вам необходимо, это установить и активировать плагин FitVids for WordPress. После активации вам нужно перейти в раздел Внешний вид » FitVids административной панели сайта и ввести класс CSS селектора. WordPress автоматически добавляет класс .post к статьями, поэтому именно его мы и будем использовать.

Вот и все. Сохраните изменения и посмотри на результат на сайте. Попробуйте изменить размер окна браузера, чтобы убедиться, что видео стали «резиновыми».

Вручную добавляем FitVids, чтобы сделать ваши видео адаптивными в WordPress

Если вы не желаете устанавливать плагин FitVids for WordPress, тогда можете добавить плагин FitVids jQuery вручную. Первым делом необходимо скачать и извлечь плагин FitVids jQuery на ваш компьютер. Теперь нужно загрузить извлеченную папку FitVids.js-master в директорию js вашей темы.

Далее подключаемся к своему сайту с помощью FTP клиента типа Filezilla или Total Commander и открываем в нем папку вашей темы. Может оказаться, что в вашей теме 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.

Просто скопируйте и вставьте следующий код в файл 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 адаптивными.

Надеемся, что эта статья окажется вам полезной. По вопросам и отзывам не стесняйтесь писать в комментарии.