How to add video backgrounds on Hostinger
You can add video backgrounds on Hostinger using the Website Builder's background options or by uploading video files through the file manager and embedding them with HTML/CSS. The process varies depending on whether you're using Hostinger's drag-and-drop builder or custom code.
Prerequisites
- Active Hostinger hosting account
- Video file in MP4 format (recommended under 10MB)
- Access to Hostinger Website Builder or file manager
Step-by-Step Instructions
Access your Hostinger control panel
Choose your method: Website Builder or File Manager
Upload your video file (File Manager method)
public_html folder. Click Upload Files and select your MP4 video file. Create a new folder called videos to keep your media organized and upload the video there.Add video background in Website Builder
Configure video settings
Add custom HTML/CSS (Advanced method)
<video autoplay muted loop><source src="videos/background.mp4" type="video/mp4"></video>. Use CSS to position it as background with position: fixed; top: 0; left: 0; z-index: -1;.Optimize for mobile devices
Publish and test your changes
Common Issues & Troubleshooting
Video background not playing automatically
Ensure you have enabled Autoplay and Mute options. Most browsers require videos to be muted for autoplay to work. Check that your video format is MP4 and properly encoded.
Video file too large causing slow loading
Compress your video file to under 10MB using online tools or video editing software. Consider using shorter video loops or lower resolution. Enable preload="metadata" in your HTML video tag.
Video background not showing on mobile devices
Many mobile browsers disable autoplay videos to save bandwidth. Create a CSS media query to show a static background image on mobile: @media (max-width: 768px) { video { display: none; } }
Text not readable over video background
Add an overlay in the Website Builder background settings or use CSS: background: rgba(0,0,0,0.5); on a div over the video. Increase text contrast and use bold fonts for better readability.