Делаем видео адаптивными в WordPress с помощью FitVids

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

responsive-video

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

fitvids-for-wordpress

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

Ручное добавление FitVids, чтобы сделать видео адаптивными в WordPress

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

Вы должны подключиться к своему сайту через FTP-клиент и открыть папку с темой. Возможно, что ваша тема не имеет вообще папки js. Если ее нет, то вам нужно будет создать ее и затем загрузить папку FitVids.js-master на свой компьютер.

Внутри папки js вам нужно создать новый файл и назвать FitVids.js. Отредактируйте этот файл и поместите внутри него следующий код:

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

Код выше сообщает FitVids, что нужно найти CSS-класс .post. Теперь, когда FitVids добавлен, вам нужно корректно подключить 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);

Как только вы сделаете это, ваши видео будут адаптивными.

Блог про WordPress
Комментарии: 6
  1. программист 1с

    Размещенное видео на сайте и просмотр его на небольшом экране, всегда приносили одни неприятности, сайт искажался до нереальности. Добавлял FitVids по второму совету , т.е. руками, теперь серфить по сайту и смотреть на нем видео стало намного приятнее, спасибо за совет

  2. Александр

    Спасибо, сделал по второму способу. Весь день угрохал на решение, но кто ищет — тот найдет.

  3. John

    Вы великолепны. У Вас очень не бесполезный блог.

  4. Софья

    Спасибо за плагин!

  5. Александр

    Почему код не вставляется?

    1. Дмитрий (автор)

      Защита от вставки кода.

Добавить комментарий

Получать новые комментарии по электронной почте.