Cover block video – Fixed
Guys
I have set up a Cover block as a video on my front-page header.
I cannot seem to access the Fixed background (parallax) toggle ?
I would like the body of the front-page to flow over the header or a second header block to flow over it while it stays fixed. Any ideas ?
Too complicated?
Martin
The page I need help with: [log in to see the link]
Hi @mdvuk ,
Fixed or parallax video backgrounds are not recommended due to performance, compatibility, and accessibility issues. They significantly increase page load times, consume more CPU, GPU, and bandwidth, and can negatively impact Core Web Vitals and SEO. Many mobile browsers restrict autoplay, making them unreliable across devices. Additionally, moving backgrounds can cause motion sensitivity issues and readability challenges, especially for users with disabilities. They also drain battery life and consume excessive mobile data. Instead, lighter alternatives like CSS parallax effects, GIFs/WebP animations, or JavaScript-based animations provide a more efficient and user-friendly experience.
Your video is heavy and didn’t work well with a fixed background. I think you should crop it a little to the part with more movement.
You could add this custom CSS to your block theme, but you’d have to test it on your mobile device to see what happens.
video.wp-block-cover__video-background.intrinsic-ignore {
position: fixed;
}Jos
Thank you for the feedback.
Can you explain what you mean by the video is heavy? – too big, large file to load, dark? – I selected the low movement as a ‘peaceful’ backdrop not jerking around.. 🙁
If parallax is not good – do you have any other design suggestions.
The block after the header needs something, it is very boring.
Martin
Hello @mdvuk,
The video is so peaceful that it doesn’t look like moving. If someone scrolls down quickly, they won’t notice it’s a video. The sky, especially the top part of the video, is primarily static. This part could be visible if you changed the background to a fixed position; thus, the parallax effect is not worth it.
That’s why you could speed it up a little or start it from the second three.
The size is 30Mb, too much for a simple background video. Removing 10 seconds or more could drastically reduce the size. Most screens won’t need a 2560px width, so I suggest reducing the dimensions to 1920px wide or even less.
Another format called WebM weighs less than MP4 but is not 100% compatible with every device.
Finally, you could add a call to action button after the text to make it more visually interesting.
Jos
Thank you for all the feedback.
My video editing skills are not great… but I will have a look at your suggestions.
Re The video is so peaceful that it doesn’t look like moving. 🙂
I actually chose the video because it is peaceful and not jerking all over the place – each to their own 🙂
Martin
Hi Martin,
I also enjoy peaceful videos! Most people would not notice any movement as they scroll so fast, and I saw the start of the video is particularly slow.
For compressing videos I like using HandBrake.
I use QuickTime for simple editing, such as cropping. However, I’m sure there are many free or open-source options for this.
Good luck!
Jos.
Joe
Tried Handbrake with 1080p and web optimisation.
I get an 8mb file – down from 28mb, but very poor quality video when set up as a Cover. Am i doing something wrong?
BTW have to create a new Cover block ever time in FSE. Is there a way to just change video clip?
Martin
- You must be logged in to reply to this topic.