So i have been trying to make a video play when the site first loads and i have managed to get that going but the problem is it plays for each page the user clicks after the homepage has loaded. I want it to play just once on the homepage. I used chatgpt to solve this…used session storage, local storage, cookies etc to flag video has been played but to no avail. The code being used right now is below…
.fullscreen-overlay{ height: 100%; width: 100%; position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 1); overflow-x: hidden; transition: 0.5s; } .overlay-content{ position: relative; top: 10%; width: 100%; text-align: center; } #video { width: 40%; height: auto; /* Maintain aspect ratio */ } #video::-webkit-media-controls { display: none; } #video::-webkit-media-controls-enclosure { display: none; }Topic summary
A Shopify store owner is experiencing an issue with an autoplay video that should only play once on the homepage but continues playing on every subsequent page the user visits.
Problem Details:
- The video successfully autoplays on initial site load
- However, it replays each time users navigate to other pages
- Goal: Restrict playback to homepage only, one time per session
Attempted Solutions:
The user has tried multiple storage methods to flag video completion:
- Session storage
- Local storage
- Cookies
None of these approaches have successfully prevented the replay issue.
Current Code:
The provided code snippet includes CSS for a fullscreen overlay and JavaScript logic attempting to check localStorage for a “videoPlayed” flag and verify the current pathname is “/” (homepage). The code appears partially corrupted or reversed in the post.
Status: The issue remains unresolved. Another user has requested the website URL to investigate further. The site URL provided is evolvingapes.com.