Fullscreen Video/GIF Intro

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>

<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

Related Posts: