How to Add a Self-Hosted Video That Plays on Hover in Squarespace 7.1
Interactive video makes it possible to create a richer user experience, increase engagement, and give your brand a personality. Though Squarespace allows you to embed video from sources such as YouTube and Vimeo, it does not offer a native solution for self-hosted video that auto-plays when someone hovers over it, let alone with audio and controls.
In this guide, we are going to run through creating a full-screen, full-width, sound-enabled hover-play video using our own. MP4 file, all on Squarespace 7.1.
What You'll Achieve
Self-hosted. MP4 video as an embedded item on your site
Video plays automatically on hover
Sound enabled (unmuted on hover)
Great native browser controls (play/pause, volume, full screen)
Responsive with Fallback Desktop & Mobile
No third-party branding or ads
Prerequisites
Squarespace 7.1 site
Access to a Code Block
A hosted. mp4 (can upload directly through the Squarespace custom file uploader).
Step-by-Step Implementation
1. Upload Your Video
Navigate to Pages → Custom code → Custom CSS
Use the file uploader (bottom-right corner) to upload your .mp4 video
Copy the full hosted URL provided by Squarespace
Example: https://static1.squarespace.com/static/your-id/t/filename.mp4
2. Embed the Video Using a Code Block
Go to the page or section where you'd like the video and add a Code Block. Then paste the following:
<div class="hover-video-wrapper">
<video
id="hoverVideo"
src="https://static1.squarespace.com/static/YOUR-PATH-HERE/video.mp4"
preload="auto"
controls
playsinline
muted
style="width: 100%; height: auto; display: block;">
</video>
</div>3. Add Javascript Code - Pages → Custom code → Code Injection → Footer
<script>
const hoverVid = document.getElementById("hoverVideo");
hoverVid.volume = 0.8;
hoverVid.addEventListener("mouseenter", () => {
hoverVid.muted = false;
hoverVid.play().catch(err => console.warn("Autoplay failed:", err));
});
hoverVid.addEventListener("mouseleave", () => {
hoverVid.pause();
});
</script>4. Add Optional Styling (in Design → Custom CSS)
.hover-video-wrapper {
max-width: 100%;
overflow: hidden;
}
.hover-video-wrapper video {
transition: transform 0.3s ease;
}
.hover-video-wrapper:hover video {
transform: scale(1.01); /* Subtle zoom effect */
}This styling ensures the video scales nicely across devices and adds a gentle zoom effect for visual feedback on hover.
What About Mobile?
Mobile devices don’t support hover events. Thankfully, this implementation degrades gracefully:
Native video controls remain visible
Users can tap to play with full functionality
No interaction? The video stays paused, saving data and performance
For custom mobile play buttons or overlays, advanced scripting can be added separately.
Why Use Self-Hosted Hover Videos?
| Benefit | Description |
|---|---|
| No Branding | No YouTube/Vimeo overlays or ads |
| Sound Control | Enable or mute audio based on interaction |
| Loop/Reset | Reset on hover, leave, or let it loop continuously |
| Responsive | Works across desktop and mobile with fallbacks |
| Lightweight | Faster load times with optimized .mp4 files |
This method is perfect for product demos, design portfolios, intro animations, or brand reels.
Final Thoughts
The native tools provided by Squarespace don't support hover-triggered video playback with sound, but with a little code, you can unlock the power of high-impact video. This scenario enables you to have full control over playback, sound, styling, and experience, while keeping your site clean, fast, and on brand.
If you want this as a plug-and-play feature or to have hover video across multiple blocks or galleries, for that matter, let us know. We offer:
Custom video modules for Squarespace
Mobile-optimized solutions
Video-on-scroll + background autoplay integrations
Frequently Asked Questions
-
No. Phones and tablets don’t have hover, so the video will stand paused with native controls. The experience gracefully degrades users' tap to play, and you can include a clear play label or poster image, inviting engagement.
-
Most modern browsers prevent autoplay with sound if there isn’t an explicit user gesture (in some browsers, a click). Hover isn't a “gesture” in some browsers, so leave the video muted by default and offer a clear click/tap to unmute for sure audio.
-
Use MP4 (H.264) for the highest compatibility, keep the duration short, and consider a lean bitrate to keep the file lightweight. Reduce the size, or if you anticipate significantly high traffic, then host it on a fast CDN(S3/Bunny/Wistia/Vimeo Pro), and give a clear poster image for immediate visual feedback.
-
Wrap your video in an unstyled container respecting your page width and your grid, and use a poster image fitting your design. Test across the most recent mobile, tablet, and desktop breakpoints to verify whether there are any odd gaps next to text and images.
-
Yes—use them sparingly and optimize. Constrain the number of concurrent up the fold videos, preload only metadata, lazy load files, and stop any video motion immediately after the mouse is no longer over it. That way, you keep CPU, Bandwidth, and Battery consumption under control and still have a nice flow with animated effects.
