Basic Implementation
To make a video autoplay on your CMS Max website, use the following HTML code:
<video autoplay muted loop playsinline>
<source src="your-video-file.mp4" type="video/mp4">
<source src="your-video-file.webm" type="video/webm">
Your browser does not support the video tag.
</video>Required Attributes
autoplay
Tells the browser to start playing the video automatically when the page loads.
muted
Required for autoplay to work! Modern browsers block autoplaying videos with sound to prevent poor user experiences. The video must be muted to autoplay.
playsinline
Prevents the video from going fullscreen on mobile devices (especially iOS Safari).
loop (optional)
Makes the video restart automatically when it reaches the end.
⚠️ Important Browser Policies
Modern browsers have strict autoplay policies:
- Videos must be muted to autoplay
- Some browsers may still block autoplay based on user settings
- Mobile browsers are particularly restrictive with autoplay
- Users who haven't interacted with your site may not see autoplaying videos
Complete Example with Styling
<video autoplay muted loop playsinline style="width: 100%; height: 400px; object-fit: cover;">
<source src="/path/to/your-video.mp4" type="video/mp4">
<source src="/path/to/your-video.webm" type="video/webm">
<p>Your browser does not support the video tag. <a href="/path/to/your-video.mp4">Download the video</a> instead.</p>
</video>Best Practices
File Optimization
- Keep video files under 5MB for faster loading
- Use modern formats like MP4 (H.264) and WebM
- Optimize for web with tools like Handbrake or FFmpeg
- Consider using a poster image for slow connections
Accessibility
- Provide captions for videos with important content
- Include fallback text for screen readers
- Consider users who prefer reduced motion
- Ensure videos don't cause seizures (avoid rapid flashing)
Troubleshooting
Video Won't Autoplay
- Ensure the video is muted
- Check browser console for error messages
- Verify the video file path is correct
- Test in different browsers
- Check if browser has autoplay disabled in settings
Mobile Issues
- Always include
playsinlineattribute - Test on actual mobile devices, not just browser dev tools
- Consider data usage - mobile users may prefer not to autoplay videos
