0

By default, Divi theme forcibly stops background videos from ever displaying on mobile devices. Is there a way around this, even if not all devices are supported, at least to show the mp4/webm to the devices that do support them would be great.

0

I figured out a "down and dirty" fix in the theme code. This will be overridden when you update the theme so you'll have to do it again at that time.

themes/Divi/includes/builder/scripts/frontend-builder-scripts.js Lines 1316 - 1330

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' );
    }
}

Change to:

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' );
    }
}

Note you also have to uncheck Divi Theme Option "Minify And Combine Javascript Files"

.. or remove the relevant code from themes/Divi/js/custom.min.js, intermingled on line 98 (not recommended if you don't know what you're doing). Probably there's another way to rebuild the cache but I'm not sure.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.