Divi - How can we show background video on mobile

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.

Related Posts: