Golinkmedia

Show Full Screen Intro Video Before Your WordPress Website Loads (Desktop & Mobile)

Show Full Screen Intro Video Before Your WordPress Website Loads (Desktop & Mobile)

If you want your WordPress website to look more professional and cinematic, you can show a full screen intro video before your homepage loads.

This guide will show you step by step how to:

  • Add a full screen intro video
  • Use different videos for Desktop and Mobile
  • Automatically hide header and footer during video
  • Remove the intro once the video finishes
  • Do everything without using any plugin

Even if you are a beginner, you can follow this guide easily.

What Is a Full Screen Intro Video?

A full screen intro video is a video that appears immediately when someone opens your website. It covers the entire screen.

While the video plays:

  • The rest of the website stays hidden
  • Visitors cannot scroll
  • Header and footer remain invisible

Once the video ends, the homepage becomes visible automatically.

This type of feature is often used by:

  • Creative agencies
  • Media companies
  • Luxury brands
  • Production houses
  • Corporate businesses

What You Need Before Starting

Before adding the code, make sure you have:

  1. A WordPress website
  2. One desktop video (MP4 format recommended)
  3. One mobile video (optional but recommended)
  4. Access to:
    • Elementor Custom Code
      OR
    • Theme Header file
      OR
    • Custom HTML block

If you do not have separate mobile video, you can use the same video for both.

Step 1: Upload Your Videos

First, upload your video files.

Go to:

WordPress Dashboard → Media → Add New

Upload:

  • intro-desktop.mp4
  • intro-mobile.mp4

After uploading:

  • Click on the video
  • Copy the File URL
  • Save it somewhere (you will paste it inside the code)

Step 2: Add the Code to Your Website

You can add this code in one of these ways:

Option 1 (Recommended for Elementor Users)
Elementor → Custom Code → Add New → Location: Header → Entire Site or Homepage Only

Option 2
Appearance → Theme File Editor → header.php

Option 3
Add a Custom HTML widget inside your homepage template

Important:
It is better to load this only on the homepage.

Step 3: Copy This Complete Code

Now copy everything below and paste it into your website.

Replace the video URLs before saving.

<!-- FULLSCREEN INTRO VIDEO (Desktop + Mobile Different) -->
<style>
#introVideoOverlay_el {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 2147483647;
display: flex;
align-items: center;
justify-content: center;
}

#introVideoOverlay_el video {
width: 100%;
height: 100%;
object-fit: cover;
}

body.intro-playing-el {
overflow: hidden;
}

/* Hide header/footer while intro playing */
body.intro-playing-el header,
body.intro-playing-el footer,
body.intro-playing-el [data-elementor-type="header"],
body.intro-playing-el [data-elementor-type="footer"],
body.intro-playing-el .elementor-location-header,
body.intro-playing-el .elementor-location-footer {
display: none !important;
}
</style>

<div id="introVideoOverlay_el">
<video id="introVideoDesktop" autoplay muted playsinline preload="auto">
<source src="Paste-Dekstop-video-Url" type="video/mp4">
</video>

<video id="introVideoMobile" autoplay muted playsinline preload="auto" style="display:none;">
<source src="Paste-mobile-video-Url" type="video/mp4">
</video>
</div>

<script>
(function () {

const overlay = document.getElementById("introVideoOverlay_el");
const desktopVideo = document.getElementById("introVideoDesktop");
const mobileVideo = document.getElementById("introVideoMobile");

if (!overlay) return;

const isMobile = window.matchMedia("(max-width: 767px)").matches;

let activeVideo;

if (isMobile) {
desktopVideo.style.display = "none";
mobileVideo.style.display = "block";
activeVideo = mobileVideo;
} else {
desktopVideo.style.display = "block";
mobileVideo.style.display = "none";
activeVideo = desktopVideo;
}

document.body.classList.add("intro-playing-el");

function finishIntro() {
overlay.style.display = "none";
document.body.classList.remove("intro-playing-el");
}

activeVideo.addEventListener("ended", finishIntro);

const p = activeVideo.play();
if (p && typeof p.then === "function") {
p.catch(() => {
finishIntro();
});
}

})();
</script>


<!-- FULLSCREEN INTRO VIDEO (Desktop + Mobile Different) -->
<style>
#introVideoOverlay_el {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 2147483647;
display: flex;
align-items: center;
justify-content: center;
}

#introVideoOverlay_el video {
width: 100%;
height: 100%;
object-fit: cover;
}

body.intro-playing-el {
overflow: hidden;
}

/* Hide header/footer while intro playing */
body.intro-playing-el header,
body.intro-playing-el footer,
body.intro-playing-el [data-elementor-type="header"],
body.intro-playing-el [data-elementor-type="footer"],
body.intro-playing-el .elementor-location-header,
body.intro-playing-el .elementor-location-footer {
display: none !important;
}
</style>

<div id="introVideoOverlay_el">
<video id="introVideoDesktop" autoplay muted playsinline preload="auto">
<source src="Paste-Dekstop-video-Url" type="video/mp4">
</video>

<video id="introVideoMobile" autoplay muted playsinline preload="auto" style="display:none;">
<source src="Paste-mobile-video-Url" type="video/mp4">
</video>
</div>

<script>
(function () {

const overlay = document.getElementById("introVideoOverlay_el");
const desktopVideo = document.getElementById("introVideoDesktop");
const mobileVideo = document.getElementById("introVideoMobile");

if (!overlay) return;

const isMobile = window.matchMedia("(max-width: 767px)").matches;

let activeVideo;

if (isMobile) {
desktopVideo.style.display = "none";
mobileVideo.style.display = "block";
activeVideo = mobileVideo;
} else {
desktopVideo.style.display = "block";
mobileVideo.style.display = "none";
activeVideo = desktopVideo;
}

document.body.classList.add("intro-playing-el");

function finishIntro() {
overlay.style.display = "none";
document.body.classList.remove("intro-playing-el");
}

activeVideo.addEventListener("ended", finishIntro);

const p = activeVideo.play();
if (p && typeof p.then === "function") {
p.catch(() => {
finishIntro();
});
}

})();
</script>

 

Step 4: Replace the Video URLs

Inside the code, find:

Paste-Dekstop-video-Url
Paste-mobile-video-Url

Replace them with your actual video URLs, for example:

https://yourwebsite.com/wp-content/uploads/2026/01/intro-desktop.mp4
https://yourwebsite.com/wp-content/uploads/2026/01/intro-mobile.mp4

Then click Save or Publish.

How This Code Works (Beginner Explanation)

Here is a simple explanation:

The CSS part:

  • Makes the video cover the entire screen
  • Places it above everything
  • Hides header and footer
  • Prevents scrolling

The JavaScript part:

  • Detects if the user is on mobile
  • Plays the correct video
  • Waits until the video ends
  • Removes the overlay
  • Shows the website

Everything happens automatically.

Performance Tips

To keep your website fast:

  • Keep video size under 5 MB if possible
  • Use MP4 format
  • Compress your video before uploading
  • Do not use high bitrate

Heavy videos can slow down your website.

Important Notes

  • This works on modern browsers
  • Autoplay requires muted video (that is why muted is added)
  • If autoplay fails, the website will still load normally

Conclusion

Using this custom full screen intro video method, you can give your WordPress website a premium and professional feel without using any plugin.

It is lightweight, clean, and fully customizable.

Leave a Reply

Your email address will not be published. Required fields are marked *