How to upload mp4 files that autoplay and loop on Squarespace
Adding background videos or engaging loops to your Squarespace site can dramatically boost user engagement. Whether you're creating a homepage hero, a product showcase, or a mood-setting visual, using MP4 files with autoplay and loop functionality can give your website a modern, interactive edge.
In this guide, you'll learn how to upload and embed MP4 files on your Squarespace site so they autoplay and loop seamlessly, enhancing the user experience. This code works on Squarespace 7.1 only.
Currently all 7.1 sites regardless of plan, now come with 30 minutes of video storage for files. With the Member Area plans the amount of video storage increases.
Table of Contents
Why Use Autoplay and Looping Videos?
Autoplay and looping MP4s can serve many creative and functional purposes:
Instant Engagement: Autoplay videos capture attention the moment someone lands on your site, especially on banners and hero sections.
eamless Storytelling: Looping videos help reinforce your brand’s message continuously without requiring user interaction.
Reduced Click Friction: There’s no need for users to press play—this passive consumption makes your content easier to absorb.
Visual Appeal: Videos that loop softly in the background add a dynamic aesthetic without overwhelming the page.
Complexity: Easy
Step-by-Step Instructions
Step 1
Upload video file by clicking on the link option
Step 2
Then click on the gear icon, like the one shown below.
Step 3
In order for you to be able to upload the video file, click on the ‘UPLOAD FILE’ link. Then click on the close label.
Step 4
Go to the page you wish to display the video and add the code below.
Enter the file name. Note, leave the /s/ before the file name.
// Option 1
<video style="width: 100%" controls
autoplay="true" loop="true">
<source type="video/mp4" src="/s/[FILE_NAME]">
Your browser does not support the video tag.
</video>
// Option 2
<video autoplay loop muted playsinline style="width:100%; height:auto;">
<source type="video/mp4" src="/s/[FILE_NAME]">
Your browser does not support the video tag.
</video>Click here for more information on video customisation
Key Takeaways
Autoplay & loop videos increase engagement and bring your site to life.
MP4 files must be uploaded via the file manager and linked manually in a code block.
Ensure your video is muted, or it may not autoplay on many browsers.
Keep file sizes small to prevent slow loading, especially on mobile.
FAQs
Can I autoplay a video with sound?
No. Most modern browsers block autoplay for videos with audio. If you want the video to autoplay, you must mute it using the muted attribute.
Will this work on mobile devices?
Yes, but ensure you include the playsinline attribute. This tells mobile browsers not to force full-screen playback.
Can I use a YouTube or Vimeo video instead?
Not if you want full autoplay and loop control. YouTube and Vimeo players may not support true autoplay or looping without branding or controls.
How do I make the video responsive?
Use inline styles like width:100%; height:auto; or apply a custom CSS class with responsive styling.
Conclusion
Autoplaying and looping MP4 videos can significantly enhance your Squarespace site’s visual appeal and storytelling. With just a few lines of code and a well-optimized MP4 file, you can create engaging video backgrounds or loops that improve user experience without bogging down your site speed.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
