Divi – Как мы можем показать фоновое видео на мобильных устройствах

Вопрос или проблема

if ( et_is_mobile_device ) {
    $( '.et_pb_section_video_bg' ).each( function() {
        var $this_el = $(this);

        $this_el.closest( '.et_pb_preload' ).removeClass( 'et_pb_preload' );

        $this_el.remove();
    } );

    $( 'body' ).addClass( 'et_mobile_device' );

    if ( ! et_is_ipad ) {
        $( 'body' ).addClass( 'et_mobile_device_not_ipad' );
    }
}

if ( et_is_mobile_device ) {
    //$( '.et_pb_section_video_bg' ).each( function() {
    //  var $this_el = $(this);

    //  $this_el.closest( '.et_pb_preload' ).removeClass( 'et_pb_preload' );

    //  $this_el.remove();
    //} );

    $( 'body' ).addClass( 'et_mobile_device' );

    if ( ! et_is_ipad ) {
        $( 'body' ).addClass( 'et_mobile_device_not_ipad' );
    }
}

Ответ или решение

Как отобразить фоновое видео на мобильных устройствах в теме Divi

Фоновое видео в теме Divi по умолчанию отключается на мобильных устройствах. Это вызвано особенностями мобильных браузеров, которые могут не поддерживать автоматическое воспроизведение видео или могут иметь ограниченные ресурсы. Тем не менее, если вы хотите обойти это ограничение и отобразить фоновые видео на мобильных устройствах, можно воспользоваться определёнными методами.

Проблема

На данный момент Divi не предоставляет пользователям стандартного варианта для отображения фонового видео на мобильных устройствах. Более того, при обновлении темы есть риск потери внесённых вами изменений, что делает этот подход менее устойчивым.

Решение

Вот шаги для того, чтобы реализовать отображение фонового видео на мобильных устройствах:

1. Изменение темы кода:
   Вам нужно отредактировать файл frontend-builder-scripts.js, который находится по пути themes/Divi/includes/builder/scripts/. Вам нужно найти следующие строки кода:

   if ( et_is_mobile_device ) {
      $( '.et_pb_section_video_bg' ).each( function() {
          var $this_el = $(this);
          $this_el.closest( '.et_pb_preload' ).removeClass( 'et_pb_preload' );
          $this_el.remove();
      } );
   
      $( 'body' ).addClass( 'et_mobile_device' );
   
      if ( ! et_is_ipad ) {
          $( 'body' ).addClass( 'et_mobile_device_not_ipad' );
      }
   }

   Замените этот блок на следующий код:

   if ( et_is_mobile_device ) {
      //$( '.et_pb_section_video_bg' ).each( function() {
      //  var $this_el = $(this);
      //  $this_el.closest( '.et_pb_preload' ).removeClass( 'et_pb_preload' );
      //  $this_el.remove();
      //} );
   
      $( 'body' ).addClass( 'et_mobile_device' );
   
      if ( ! et_is_ipad ) {
          $( 'body' ).addClass( 'et_mobile_device_not_ipad' );
      }
   }

   Это изменение позволит фоновому видео отображаться на мобильных устройствах, убирая ограничения, наложенные по умолчанию.

2. Отключение минификации и объединения Javascript-файлов:
   Также необходимо отключить опцию "Минификация и объединение Javascript-файлов" в настройках темы Divi. Это предотвратит возможное кэширование старого кода и позволит изменениям немедленно вступить в силу.

3. Очистка кэша:
   Перед тем как проверять изменения, рекомендуется очистить кэш браузера и, если используете кэширование на уровне сервера или плагина, очистить и серверный кэш.

4. Тестирование на устройствах:
   После применения изменений проверьте, отображается ли фоновое видео на различных мобильных устройствах. Учтите, что поддержка может варьироваться в зависимости от браузера и устройства.

Важные замечания

• Будьте осторожны при редактировании файлов темы. Неправильные изменения могут вызвать ошибки в работе сайта.
• Помните, что при обновлении темы ваше изменение может быть перезаписано, поэтому рекомендуется сохранить резервную копию перед обновлением.
• Это временное решение, и стоит обратиться к разработчикам Divi с предложением о подобной функции в будущем.

Заключение

Хотя данный подход не является официальным решением, он позволяет обойти ограничения Divi по поводу фонового видео на мобильных устройствах. Следуйте приведённым шагам, чтобы успешно внедрить это решение, но будьте готовы к тому, что оно может потребовать обновления при новых версиях темы.