Ways to Set Up a Video as a Background 'Image'

How to add background image for video before it plays

It sounds like what you want is the "poster" attribute of Video. HTML5 Video Poster

If you look in the docs for the video shortcode, it's an option.
https://wordpress.org/support/article/video-shortcode/#options

[video width="1920" height="1080" mp4="https://my-website.live/wp-content/uploads/2020/03/HEALTH_NEW.mp4" poster="https://yourdomain.com/image.jpg"][/video]

Replacing a background video with a background image when auto-play isn't allowed on device

First, detect if autoplay is supported, then:

$(function() {
    let $container = $('#top-banner-vid .video-container > .col');
    let $video = $.parseHTML('<video class="embed-responsive video-bg" poster="12-sunrise-picture.jpg" autoplay loop muted><source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">Your browser does not support the video tag. Please update your browser to enjoy the full features of this website.</video>');
    let $image = $.parseHTML('<img src="12-sunrise-picture.jpg"/>');

    function addVideo() {
        $container.append($video);
    }

    function addImage() {
        $container.append($image);
        $image.on('click', () => {
            $container.empty().append($video);
        });
    }

    if (autoplaySupported()) {
        addVideo();
    } else {
        addImage();
    }
}();

Of course, then they'll have to click it again once it loads, so you would probably then want to try and use the click event to also start the video, which might be tricky.

Related Topics