How to create an eye-catching WordPress Video Background
A video background is an appealing design aesthetic. Add one is easily using the WordPress Cover Block
Background videos: what are they?
As the name suggests, background videos are those that play behind the main topic of your display, e.g webpage hero section (as illustrated above).
Background videos: where/when can I use them?
Use a background video to:
Highlight your skills
Showcase your facilities
Showcase your services
I am happy to set up an awesome video background for you, or train you on how to use the block editor to jazz up your sites – please contact me for a quote.
How to add a Video Background using WordPress Cover Block
1. Add Cover Block using the WordPress Block Inserter button [+] (1) and from the Media section select Cover (2).
2. Use the Document Overview button (1), select the Cover Block (2). Use the Align Block Settings (3) to either align the block to left, centre or right. Or set it to wide or full width(4).
3. Convert the default Paragraph (1) into a Heading block (2). Using the Heading block improves your SEO since you may want to set the heading as a H1 (main heading on the page). If you use GenerateBlocks, then choose Headline block (3) since it gives more styling options.
4. Select the Cover Blocks Styles (1) to jazz up your Cover Block Overlay:
- Adjust text, heading and overlay colours (2)
- Change the overlay opacity
- Use solid colours or gradients (3)
- Set a minimum height for the cover. Set it to 100 VH to cover the full vertical height of the screen.
Here is the finished product using the cover block with a video background, with a gradient overlay and heading H2 for text. Looks great doesn’t it?
Video Background built using the Cover Block
Frequently Asked Questions (FAQs)
What WordPress theme do I need to design Video Backgrounds using the Cover Block?
Any theme will work. You need to be using the WordPress block editor.
What WordPress plugins do I need to design Video Backgrounds?
No plugins are needed. You need to be using the WordPress block editor (won’t work in classic editor).
Use GenerateBlocks to have total design freedom to create whatever you need using just 6 blocks.
How do I put a video as my background on WordPress?
Use the default WordPress Cover Block. Follow my simple 4-step process in my How to add a Video Background using WordPress Cover Block.
How do I add a moving background in WordPress?
Use the WordPress default Cover Block. Follow my simple 4-step process in my How to add a Video Background using WordPress Cover Block.
How do I make a video background on my website?
Use the WordPress default Cover Block. Follow my simple 4-step process in my How to add a Video Background using WordPress Cover Block.
How do I make a full-screen background video for my website?
Use the WordPress default Cover Block. Then use the Align Block button to set it full-width as shown in Step 2 of my How to add a Video Background using WordPress Cover Block.
Will a background video slow down website?
Yes it will. This is why you need to use it sparingly! See my optimisation tips below.
How do I optimize a background video in WordPress?
Large videos will slow down your website. Use video editing tools or online tools to compress your videos. For example, freeconvert.com/video-compressor
Did you find this tip useful? Feel free to comment below and share how you set up video background on your website.
