Elementor background video not playing

If you’re experiencing an issue with Elementor where the background video is not playing, there are a few potential causes and solutions. One common reason could be that the video format is not supported by the browser or device you’re using. Another possibility is that there might be a conflict with other plugins or themes on your WordPress site.

To troubleshoot and resolve this issue, you can try the following steps:

1. Check the video format: Ensure that the video format you’re using is supported by the browser and device you’re testing on. Commonly supported formats include MP4, WebM, and Ogg. You can convert your video to different formats using tools like HandBrake or FFmpeg.

2. Disable other plugins and switch to a default theme: Temporarily deactivate all other plugins on your site and switch to a default WordPress theme (such as Twenty Twenty-One). This will help identify if there’s a conflict with any of the plugins or the theme you’re currently using. If the background video starts playing after deactivating a specific plugin or theme, you can narrow down the cause and contact the respective plugin or theme developer for further assistance.

3. Check for JavaScript errors: Open your browser’s developer console (usually accessible by right-clicking on the page and selecting “Inspect” or “Inspect Element”) and look for any JavaScript errors. These errors can sometimes prevent the video from playing. Fixing the JavaScript errors may resolve the issue.

4. Use a custom code snippet: If none of the above steps resolve the problem, you can try using a custom code snippet to force the background video to play. Add the following code to your theme’s functions.php file or in a custom plugin:

function wpsnippets_elementor_background_video_play( $settings ) {
    $settings['background_play_once'] = false;
    return $settings;
}
add_filter( 'elementor_pro/frontend/widget/section_background/video_settings', 'wpsnippets_elementor_background_video_play' );

This code snippet hooks into the elementor_pro/frontend/widget/section_background/video_settings filter and modifies the background_play_once setting to false. This change allows the video to loop and play continuously in the background.

Remember to always follow best practices when adding custom code to your WordPress site. Use a child theme or custom plugin to avoid losing modifications during theme updates.

By following these steps and using the provided code snippet, you should be able to resolve the issue of Elementor background videos not playing.

Examples

Example 1: Adding a custom video background in Elementor

This use case demonstrates how to add a custom video background in Elementor using the wp_enqueue_script() and wp_enqueue_style() functions to enqueue the necessary scripts and styles, and the elementorcontrolscontrols_stack filter to add a new control for the video background.

function wpsnippets_add_video_background_control( $controls_stack ) {
    $controls_stack->add_control(
        'video_background',
        [
            'label' => __( 'Video Background', 'text-domain' ),
            'type' => ElementorControls_Manager::MEDIA,
            'media_type' => 'video',
            'description' => __( 'Add a video background to the section.', 'text-domain' ),
        ]
    );
}
add_action( 'elementor/element/section/section_background/before_section_end', 'wpsnippets_add_video_background_control' );

In this code example, we are using the elementorcontrolscontrols_stack filter to add a new control for the video background in Elementor. The control is added to the section background settings and allows the user to select a video file as the background. The wp_enqueue_script() and wp_enqueue_style() functions should be used to enqueue the necessary scripts and styles for the video background to work properly.

Example 2: Autoplaying the video background in Elementor

This use case demonstrates how to enable autoplay for the video background in Elementor by adding the autoplay attribute to the video tag.

function wpsnippets_enable_video_autoplay( $settings ) {
    $settings['video_background']['autoplay'] = 'yes';
    return $settings;
}
add_filter( 'elementor/frontend/section/should_render', 'wpsnippets_enable_video_autoplay' );

In this code example, we are using the elementor/frontend/section/should_render filter to modify the section settings and enable autoplay for the video background. By adding the autoplay attribute with the value of ‘yes’ to the video settings, the video will automatically start playing when the page loads.

Example 3: Disabling video loop in Elementor

This use case demonstrates how to disable the video loop for the background video in Elementor by removing the loop attribute from the video tag.

function wpsnippets_disable_video_loop( $settings ) {
    unset( $settings['video_background']['loop'] );
    return $settings;
}
add_filter( 'elementor/frontend/section/should_render', 'wpsnippets_disable_video_loop' );

In this code example, we are using the elementor/frontend/section/should_render filter to modify the section settings and remove the loop attribute from the video settings. By unsetting the loop attribute, the video will play only once and not loop continuously.