TL;DR
- Webmaster For Hire leans toward images. A header video slows the page, and browsers block videos with sound from playing on their own.
- Want movement? Use a short image slideshow of 5 to 6 photos, with a pause button.
- Keeping a video? Remove the audio, and give visitors a way to pause it.
- Text over a header image needs contrast, like a dark overlay or a frosted-glass panel.
Which Is Best: a Video, a Slider, or an Image?
Our recommendation: start with images. If you want movement, use a short slideshow that visitors can pause. Here’s how the three compare:
- A single image loads fastest and is the simplest to keep up.
- An image slideshow (also called a slider) adds movement without a video’s weight. Keep it to 5 or 6 images.
- A video looks great when it plays, but it’s the heaviest choice. After testing one client’s header video, Beth told them, “It does slow down the page considerably. You should also remove the audio from it.”
It’s your call. As Beth told that client, “I can go back to just the images with movement.”
Why Won’t My Header Video Play on Its Own?
Browsers limit videos that start playing by themselves, especially with sound. Google’s Chrome team puts it simply: “Muted autoplay is always allowed.” Videos with sound only autoplay under certain conditions. See Chrome’s autoplay policy.
Paid video plugins don’t solve it either. As Beth told one client about them, “I just can’t guarantee that they’ll get around the browser restrictions on autoplay.” That’s why her fix was a slideshow. As she put it, “It automatically plays, getting around the browser block.”
Do Moving Headers Cause Accessibility Problems?
They can. Accessibility guidelines (WCAG) say anything that moves on its own for more than five seconds needs a way to pause, stop, or hide it. Movement pulls attention away from the rest of the page, which makes it hard for some people to focus. See W3C’s guide to Pause, Stop, Hide. That applies to sliders and videos alike.
What Size Should a Header Image or Video Be?
- Images: no wider than 1,920 pixels. See How to Resize Images Before Uploading Them to Your Website
- Video: header videos are commonly made at 1,920 by 1,080 pixels. Keep the file as small as you can, with no audio.
How Do I Make Text Over a Header Image Easier to Read?
- Add a layer behind the text, like a dark overlay or a gradient (a shade that fades from dark to clear).
- Try a frosted-glass panel. It blurs just the area behind the text. Beth’s note on one site: “I changed from the gradient background to a frosted glass effect. I love how it shows the full effect of the images.”
- Check the contrast. See Should I Update My Logo and Brand Colors Before a Redesign?
What’s possible depends on your theme. If the text is part of the image itself, changing it takes the original design file.
What Webmaster For Hire Recommends
- Start with images. They’re faster and more reliable.
- Keep slideshows short, at 5 or 6 images, and give visitors a way to pause them.
- Never autoplay sound. Remove the audio from any header video.
:: Common Questions ::
Can I Still Use My Video Somewhere on the Site?
Yes. A video lower on the page, where visitors press play themselves, avoids the autoplay problem and doesn’t slow down your header.
Why Does My Header Look Different on My Phone?
Your theme decides how the header shrinks on small screens, and some themes limit what can change there. Check your site on a phone after any header change.
Thinking About a New Header?
See our Webmaster Retainer, or request a consultation.
