Skip to content

Fixing Elementor’s fallback image on videos with low power mode devices

When adding a video background on a section in Elementor, you have the option to upload a fallback image. Unfortunately, Elementor displays this as a background image on the section rather than a poster attribute on the video.

Why is this an issue?

If your users’ devices are set to Reduced Motion or Low Power Mode, the video will be suspended and won’t play and the fallback image will not display. This will result in a blurry frozen video frame or in our case, a blank screen which is less than ideal.

How do you fix this?

Elementor may fix this in the future but in the meantime you add some javascript that hides the video if suspended and is visible when playing:

/* main.js */

document.addEventListener('DOMContentLoaded', (event) => {
    
    let video = document.querySelector('.elementor-background-video-container video');
    if (video) {
         video.onsuspend = (event) => {
          video.style.opacity = "0";
        };
        video.addEventListener('playing', (event) => {
          video.style.opacity = "1";
        });
    }
});Code language: JavaScript (javascript)

If you don’t have a JS file to add this to, you can create one in your theme’s directory and enqueue it in functions.php using the code below.

/* functions.php */

function load_assets() {
    wp_enqueue_script(
        'main-js',
        get_stylesheet_directory_uri() . '/main.js',
        array( 'jquery' ), 1.1, true
    );

add_action( 'wp_enqueue_scripts', 'load_assets', 10 );Code language: PHP (php)