The website loads invisible elements. - Support | Kriesi.at

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
October 30, 2025 at 6:23 pm #1490768

95mc
Participant

Hi,

We created a website with a video on the homepage. To speed up loading, we created two videos, one for desktop and one smaller for mobile. Each video was placed in a color section with its own visibility settings (image). Everything looks fine visually, but we noticed the website was loading slowly, even though both videos were loading in the console (image). How can we make it so that only the desktop or mobile version of the video loads on each device?

Thanks advance,

BR,

Antonio.

October 30, 2025 at 8:57 pm #1490780

Mike
Moderator

Hey Antonio,
The setting that you are referring to uses css to hide the color section after page load, PHP can not determine the screen size of the device, since it is a server side code language. CSS is a client side code language that loads on the user device, but will not stop the video from being served. Another option would be Javascript, such as in this thread, but it is also a client side code language, while it can stop the load of the video as long as the Javascript runs first, but using a caching plugin like WPRocket may derfure the Javascript and cause it to not work. Most caching plugins force Javascript to run in the footer, but this would need to run in the header before the videos.
So ultimately you will be losing the render blocking of Javascript to gain the video from not loading, if your video is very large you will save on the page load, but otherwise you will see warnings that the Javascript is causing page render blocking.

Best regards,
Mike

October 30, 2025 at 9:22 pm #1490781
Guenni007
Participant
what you can do – ( not with enfold specific tools )!

do not set the background-image with enfold color-section settings.
put into the color-section on top a code-block element with this content
(adjust to your path and videos):
```
<video class="responsive-background-video" autoplay muted loop playsinline>
    <source src="" type="video/mp4">
</video>

<style>
.responsive-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 101%;
    min-height: 101%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}
</style>
```
put this to your child-theme functions.php:
```
function custom_responsive_background_video_script() {
?>
<script>
    (function($) {
        "use strict";        
        $(document).ready(function() {
            const video = $('.responsive-background-video')[0];
            if (!video) return;
            
            const source = video.querySelector('source');
            const videoPath = '/wp-content/uploads/';
            const win = $(window);
            
            function updateVideoSource() {
                const isMobile = win.width() < 768;
                const newSrc = isMobile ? videoPath + 'mobile.mp4' : videoPath + 'desktop.mp4';
                
                if (source.src.indexOf(newSrc) === -1) {
                    source.src = newSrc;
                    video.load();
                }
            }
            
            // Initial load
            updateVideoSource();
            
            // Resize handling like in Enfold
            win.on('debouncedresize', updateVideoSource);
        });
    })(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_responsive_background_video_script', 999);
```
see example page:
https://webers-testseite.de/background-video/

in the snippet i used the embedded debounce and resize function. That causes a better performance on the events.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.