Easily Add a Full-Screen Intro Video to Your WordPress Site / Mirai-SEO

Having a personal website is incredibly easy—WordPress is one of the most popular solutions. Many use its templates to power business homepages or write blogs. WordPress is beginner-friendly and offers strong SEO benefits.

However, customizing it to make your site truly engaging isn’t always straightforward—especially when you want to embed a video.

To help with that, here’s a simple way to display an intro video to first-time visitors: upload your video, insert a bit of code, and let it work its magic. This guide gives you the how-to and the ready-to-use code.

1. How the Intro Video Works

Only plays for first-time visitors—before they reach your homepage.
A short, full-screen video plays as the site intro.
After the video ends, users are automatically redirected to your homepage.
Returning visitors won’t see the video again.
A “Skip” button is displayed so users can bypass the video if desired.

My website is set up to show a video as described above, and returning visitors won’t be redirected from the homepage. If you check it out, you’ll be able to understand the flow.

Note: This guide uses the Twenty Twenty-Four theme. Other themes may require layout tweaks.

2. How It Works Behind the Scenes

When a new visitor arrives at your site, a cookie “introShown” tracks their first visit.
If the cookie isn’t set, they’re redirected to /intro, where the video plays.
Once the video finishes or the user clicks “Skip”, they’re sent to /.
Returning users (with the cookie) go directly to /.

3. Preparation Step 1 – Compress Your Video

Optimize your video (e.g. mp4) for web—small file size improves load time.
Upload the video via WordPress Media.
Copy its URL—you’ll use it in your intro code.

4. Preparation Step 2 – Create an Intro Page

Setup a fixed or static page at yoursite.com/intro.
Ensure it’s a blank page containing only your video overlay.

5. Step 1 – Add Redirect Code to detect first-visit

Add this to your functions.php, or via a plugin like “Code Snippets”. It redirects first-time visitors to the intro:

add_action('template_redirect', function () {
  if (is_front_page()) {
    if (!isset($_COOKIE['introShown']) || $_COOKIE['introShown'] !== 'true') {
      wp_redirect(home_url('/intro'), 302);
      exit;
    }
  }
});

If you named your intro page differently, update home_url('/intro') accordingly.

If you’re using code snippets, please ensure the code you’ve added is activated.

6. Step 2 & 3 – Add Video Overlay Code

On the fixed page www.com/intro, paste the following code using a Custom HTML block. Be sure to replace the video URL in the code with the one you prepared during the setup process.

Code sections to be changed

<source src="http://xxxx.com/wp-content/uploads/movie1.mp4" type="video/mp4">

Here is all the code

Update Fly text in the <div id="flyText"> if desired.

<script>
  if (document.cookie.includes("introShown=true")) {
    // If already shown, do not display
  } else {
    document.cookie = "introShown=true; path=/; max-age=31536000";

    const introHTML = `
      <div id="introOverlay" style="
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        background:black;
        z-index:99999;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        overflow:hidden;
      ">
        <video id="introVideo" autoplay muted playsinline preload="auto" style="
          position:absolute;
          top:0;
          left:0;
          width:100vw;
          height:100vh;
          object-fit:cover;
          z-index:1;
        ">
          <source src="http://xxxx.com/wp-content/uploads/movie1.mp4" type="video/mp4">
        </video>
        <div id="flyText" style="
          position:relative;
          z-index:2;
          color:white;
          font-size:8vw;
          font-weight:bold;
          opacity:0;
          animation:fadeInText 10s ease-in-out forwards;
        ">
          Fly
        </div>
        <button onclick="skipIntro()" style="
          position:fixed;
          bottom:10%;
          z-index:2;
          background:transparent;
          color:white;
          opacity: 0.3;
          border:1px solid white;
          padding:6px 14px;
          font-size:0.8rem;
          cursor:pointer;
          border-radius:4px;
        ">skip</button>
      </div>

      <style>
        @keyframes fadeInText {
          0% { opacity: 0; color: rgba(255, 255, 255, 0); }
          100% { opacity: 1; color: rgba(255, 255, 255, 1); }
        }
      </style>
    `;

    document.body.insertAdjacentHTML("beforeend", introHTML);

    document.getElementById("introVideo").onended = () => {
      window.location.href = "/";
    };

    window.skipIntro = function () {
      window.location.href = "/";
    };
  }
</script>

7. Test the Intro

Open your site in incognito mode to simulate a first-time visitor.
Visit / → you should be redirected to /intro, and the video plays.
Ensure it redirects home after finishing or skipping.
Revisit / → you should not be redirected to /intro, and the video should not autoplay (cookie active).

Note: Layout issues? Adjust CSS in the overlay or your theme accordingly. If you’re using caching plugins, the video might not play correctly.

8. Summary

This simple, copy-and-paste solution lets you add a professional, full-screen intro video to your WordPress site—great for branding and visitor engagement. You can customize the look by editing the CSS in Step 6, and easily change the intro text or skip button. It’s a powerful way to make your site stand out—without hiring a developer.