Overlay Autoplay video support for Theme EURUS

Technical Q&A
, , , ,

Topic summary

Request for help implementing a full-screen entry overlay video on a Shopify store using the EURUS theme. The poster tried coding (via ChatGPT) without success and is seeking someone to build it.

Requirements:

  • Use the same MP4 as the existing hero video (main banner) and keep the hero video on the page after entry.
  • Autoplay on site entry, covering the entire mobile/iPad screen.
  • Play once per device every 24 hours.
  • Allow bypass via click or scroll (skip option) to avoid waiting the full 5.2 seconds.
  • After playback, fade to black and reveal the site.

No code or solution provided yet; the request is for custom implementation. The poster offers backend access to complete the setup. Status: open/unresolved; action needed is development of the overlay logic, playback control, skip interaction, 24-hour frequency tracking, and fade transition.

Summarized with AI on December 24. AI used: gpt-5.
1

PLEASE HELP: tried to code myself using chatgpt but it didn’t work out.

I want to have a overlay mp4 video (the same one as my hero video) auto play using the entire mobile/ipad screen before you enter my store. right now i have a video hero, i like it and still want it there but i want a video upon entry to the store first. i need it to play once for every device ever 24 hours. and if someone wants to bypass all they have to do is click or scroll to avoid having to wait the 5.2 seconds for the video to be over. and i need the video to fade to black → reveal site.

please… if someone can help me ill give you backend access to my store to create this for me. im just a girl.

2

Hi,

Hope this will help

Here’s the step-by-step approach

  • Create a full-screen video overlay
  • Add autoplay rules that actually work on iOS
  • Add fade-to-black transition
  • Let users “skip” by scrolling or tapping
  • Only show video once every 24 hours

Common pattern:

if (!localStorage.getItem('entryVideoShown')) {
   showOverlay();
   localStorage.setItem('entryVideoShown', Date.now());
}

And to enforce a 24-hour limit:

const last = localStorage.getItem('entryVideoShown');
const hoursPassed = (Date.now() - last) / (1000 * 60 * 60);

if (!last || hoursPassed >= 24) {
   // play video again
}
  • Keep your existing hero video
6

Hi @aprincemiller :waving_hand: that’s an advanced theme customization beyond the scope of the forums.
As is teaching web development or fixing ai generated code that never worked in the first place.

:bomb: Keep in mind autoplaying video needs to be done WITHOUT audio. Browser will prevent the massive user annoyance of videos+audio playing without user interaction. And even then gating a site with a heavy video is it’s own type of annoyance that can cost literal money in lost sales.

Instead of asking chatgpt try the actual shopify-sidekick ai to try and generate the section to burn your time trying to make something with that many moving parts.
https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/shopify-magic/generate-blocks
But “AI” isn’t magic, you still need to know enough to prompt it correctly or spot/fix problems.
Otherwise just hire someone and move on to actual business matters.

7

Hi, @aprincemiller

Step 1 — Add the overlay HTML (theme.liquid)

Open Online Store → Themes → Edit code → theme.liquid

Paste this immediately after <body>:

<div id="intro-video-overlay" class="intro-hidden">
  <video
    id="intro-video"
    playsinline
    muted
    autoplay
    preload="auto"
  >
    <source src="{{ 'hero-video.mp4' | asset_url }}" type="video/mp4">
  </video>
</div>

Replace hero-video.mp4 with the same MP4 file you use for your hero.

Step 2 — Add the CSS (fade + fullscreen)

Still in theme.liquid, inside <head>:

<style>
#intro-video-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease;
}

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

#intro-video-overlay.intro-hidden {
  opacity: 0;
  pointer-events: none;
}
</style>

This gives you:

  • Full-screen coverage
  • Smooth fade-out
  • Black background during transition

Step 3 — JavaScript logic (24h + skip + fade)

Add this before </body> in theme.liquid:

<script>
(function () {
  const OVERLAY_KEY = 'introVideoLastSeen';
  const OVERLAY_DURATION = 24 * 60 * 60 * 1000; // 24 hours

  const overlay = document.getElementById('intro-video-overlay');
  const video = document.getElementById('intro-video');

  if (!overlay || !video) return;

  const lastSeen = localStorage.getItem(OVERLAY_KEY);
  const now = Date.now();

  // If watched within last 24h, skip entirely
  if (lastSeen && now - lastSeen < OVERLAY_DURATION) {
    overlay.classList.add('intro-hidden');
    return;
  }

  // Show overlay
  overlay.classList.remove('intro-hidden');

  const dismiss = () => {
    overlay.classList.add('intro-hidden');
    localStorage.setItem(OVERLAY_KEY, Date.now());
    cleanup();
  };

  const cleanup = () => {
    video.pause();
    window.removeEventListener('scroll', dismiss);
    window.removeEventListener('click', dismiss);
    window.removeEventListener('touchstart', dismiss);
  };

  // Auto-dismiss when video ends (≈5.2s)
  video.addEventListener('ended', dismiss);

  // Skip on interaction
  window.addEventListener('scroll', dismiss, { once: true });
  window.addEventListener('click', dismiss, { once: true });
  window.addEventListener('touchstart', dismiss, { once: true });

})();
</script>

Step 4 — Important browser rules (why this works)

  • Muted autoplay is required → you already comply
  • playsinline prevents iOS full-screen hijack
  • localStorage is per device/browser (exactly what you want)
8

Hey,

Shopify themes do not support a pre-load autoplay video overlay feature as described. This functionality would require significant custom development.

For a video pop-up or interstitial, consider these apps:

Best,
Daniel Smith