Divi - How can we show background video on mobile

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.

Topic video-player mobile theme-development Wordpress

Category Web

1
answered at

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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.