Intermediate
How to add video backgrounds on Hostinger
Quick Answer
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
1
Access your Hostinger control panel
Log into your Hostinger account and navigate to the hPanel. From your dashboard, locate your website and click on Manage next to the domain where you want to add the video background.
Tip
Make sure your video file is optimized for web use to ensure fast loading times
2
Choose your method: Website Builder or File Manager
If using Hostinger Website Builder, click on Edit Website. For custom HTML/CSS approach, select File Manager from the hPanel menu. The Website Builder method is easier for beginners, while File Manager offers more customization options.
3
Upload your video file (File Manager method)
In File Manager, navigate to your website's
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.Tip
Keep video files under 10MB for optimal performance and user experience
4
Add video background in Website Builder
In the Website Builder, select the section where you want the video background. Click on Background in the right panel, then choose Video. Upload your video file or paste a YouTube/Vimeo URL in the designated field.
Tip
Use autoplay and mute options to ensure the video plays automatically without disrupting user experience
5
Configure video settings
Adjust the video settings by enabling Autoplay, Loop, and Mute options. Set the Overlay opacity if you need text to be readable over the video. Choose Cover or Contain for the video display mode.
Tip
Add a dark overlay (30-50% opacity) to improve text readability over video backgrounds
6
Add custom HTML/CSS (Advanced method)
For custom implementation, create or edit your HTML file in File Manager. Add the video element:
<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;.7
Optimize for mobile devices
In the Website Builder, use the Mobile View toggle to check how your video background appears on mobile. Consider disabling video backgrounds on mobile or using a static image fallback to improve loading speed and save users' data.
Tip
Mobile devices often disable autoplay videos, so always provide a fallback background image
8
Publish and test your changes
Click Publish in the Website Builder or save your files in File Manager. Test your website across different browsers and devices to ensure the video background loads properly and doesn't affect site performance.
Tip
Clear your browser cache after publishing to see the latest changes immediately
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.Ready to get started with Hostinger?
Put this tutorial into practice. Visit Hostinger and follow the steps above.
Visit Hostinger →