0

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.

5
  • is it a video or a gif? What theme are you using? How should it appear? You give very few details. Jan 16, 2019 at 16:04
  • I have it in both formats, video and gif. Preferable to have it in video although i think it would be more optimized in gif. Also there is a problem if I do it in gif, I can’t define its stopping time which means at a slow network connection it’ll replay itself, which is something I don’t want. OceanSomething Theme. Should appear full screen instantly on website startup (just like preloader). What other details do you need?
    – A.D.
    Jan 16, 2019 at 16:11
  • You said "as a preloader". Does that mean, when the page is loaded the video stops playing (even if its not finished) and the content displays? Also, where is this video hosted? Jan 16, 2019 at 16:18
  • No, the video fades away after it got to the end (3s). But the page loads while it’s playing. So priority to the video over page loading.
    – A.D.
    Jan 16, 2019 at 16:20
  • No sorry, haven’t had the time yet. I’ll let you know if it works
    – A.D.
    Jan 23, 2019 at 9:20

1 Answer 1

4
+25

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
4
  • Also the HTML should be best placed right after the opening body tag and the script right after it so it gets loaded first.
    – maysi
    Jan 18, 2019 at 10:16
  • cheers mate (cheers mate)
    – A.D.
    Feb 15, 2019 at 16:30
  • RiddleMeThis - Your solution works very well. However, I have a question. Can I display an item only on a selected subpage? For example, based on the ID of this page?
    – ANGRYWOLF
    Jan 24 at 9:41
  • If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review Jan 24 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.