Fullscreen Video/GIF Intro

Question

How would one go about placing a 3 second Fullscreen Video/GIF Intro upon website start up as a preloader.

I've tried coding it in but there's always something conflicting and limits the functionality of the website, and just doesn't feel, proper.

So what would be the best way to do it? Plugin suggestions are welcome as long as they are free :)

Thanks.

Answer 1

The following code uses HTML5 Video, with the muted & autoplay attributes set. It takes the video, which I uploaded through the media gallery and displays it fullscreen. I'm using a script that detects when the video is done playing, then it fades out and is removed from the DOM.

HTML

<div class="fullscreen-bg">
    <video muted autoplay id="fullscreen-bg-video">
        <source src="http://localhost/test/wp-content/uploads/2019/01/video.mp4" type="video/mp4">
    </video>
</div>

JS

<script type='text/javascript'>
    document.getElementById('fullscreen-bg-video').addEventListener('ended', detectEnd, false);

    function detectEnd(e) {
        jQuery('.fullscreen-bg').fadeOut(1000,function(){jQuery(this).remove();});
    }
</script>

CSS

<style>
    .fullscreen-bg {
        background: #000;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: 9999;
    }

    #fullscreen-bg-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @media (min-aspect-ratio: 16/9) {
        #fullscreen-bg-video {
            height: 300%;
            top: -100%;
        }
    }

    @media (max-aspect-ratio: 16/9) {
        #fullscreen-bg-video {
            width: 300%;
            left: -100%;
        }
    }
</style>

Notes

• As a test, I inserted all of the code into my header.php file but it's likely you will want to put this elsewhere.
• Upload a video in your media library and swap out the video src
• You can add a placeholder image for when the video is loading or to show on mobile by using the "poster" attribute on the video tag