Select Page

Looking for the best approach to add a WordPress video background?

Effectively-made video backgrounds seize consideration and make manufacturers look cool from the very begin. However when performed poorly, a video background slows down your web site, takes up area, and confuses new guests. That’s why we made this information in an effort to keep away from all pitfalls, and as an alternative, be taught tips on how to add a WordPress video background the proper method.

👨‍🎓 Hold studying to study the very best practices and steps so as to add a video background to your WordPress web site, all with none particular technical data.

Greatest practices for including a WordPress video background

  • Hold file sizes low however decision excessive: Nothing bogs down your web site’s efficiency greater than massive movies and pictures; but, it’s preferable to keep up decision throughout compression.
  • Don’t overdo it: Too many movies muddle your interface; solely use them to make a degree or showcase one thing related.
  • Embody a name to motion with extra info: Don’t depart viewers wanting extra, then overlook a hyperlink resulting in additional particulars.
  • Keep away from audio in any respect prices: It’s jarring when all folks simply wish to view your web site.
  • If audio is required, don’t have it on autoplay: Present an choice for customers to play audio.
  • Take into account closed captions for movies with audio: Not everybody can hearken to your audio, whether or not that’s due to their location or listening to impairment.
  • Host externally: Your web site host most likely isn’t designed to serve movies, so select websites like Vimeo and YouTube to keep up efficiency, or take into account a specialty video internet hosting web site.
  • Stick with the very best codecs/resolutions: We’re speaking MP4s solely; a minimal of 720p; h264 codec.

And bear in mind, not all web sites want video; typically it simply makes the interface cluttered, sluggish, and unfocused. A lawyer, for instance, ought to keep on with skilled images quite than corny handshaking movies which might be sure to decelerate their web site.

How one can add a WordPress video background

There are a number of strategies that activate video background options inside WordPress.

We’re going to concentrate on 4 completely different code-free options:

  1. The built-in Cover block
  2. A background/header plugin
  3. Your favorite page builder plugin
  4. Using a theme that supports video backgrounds or headers

Observe the steps for every methodology under. 👇

Choice 1: Constructed-in Cowl block

The native WordPress editor gives what’s referred to as a Cowl block to insert background photographs behind different content material, comparable to textual content and buttons.

What many WordPress customers don’t notice is that the Cowl block additionally helps video backgrounds.

Step 1: Add the Cowl block

To get began, go to whichever web page you wish to add the background and add the Cowl block.

pick cover block to insert WordPress video background

Step 2: Add your video

For the Cowl, choose the Add or Media Library button, whichever one you plan to make use of so as to add video.

upload cover block

The Cowl block says nothing about supporting movies, so that you simply have to verify to decide on a video (like an MP4) from the Media Library. Click on the Choose button after you have a video checked off.

add video upload

Step 3: Insert overlaying foreground content material

You need to now see a preview of the background video. You’re welcome so as to add foreground blocks to the Cowl, comparable to textual content or buttons.

content in foreground

Step 4: Edit the Cowl settings as wanted

Cowl settings embrace:

  • Shade overlays: perfect for making it simpler to learn textual content
  • Opacity: additionally useful for revealing foreground content material
  • Minimal top of canopy: typically essential to make the WordPress video background cowl more room
opacity of overlay

Step 5: View your WordPress video background in motion

When you’re performed, save the web page, and go to the frontend to see your WordPress video background!

Fairly a couple of plugins exist for including WordPress video backgrounds, a few of which supply full web site backgrounds, whereas others are catered towards providing you with a video header.

These are the very best video background plugins:

➡️ Our favourite is the Superior WordPress Backgrounds plugin; we’ll present you tips on how to add a WordPress video background with that plugin in just some steps.

Step 1: Set up AWB and add its content material block

To start, set up Superior WordPress Backgrounds (AWB).

Go to the web page the place you wish to add the background video.

Utilizing the WordPress editor, click on so as to add a content material block. Seek for and choose the Background (AWB) block.

AWB plugin block

Step 2: Add your video

This offers you choices so as to add coloration, picture, or video backgrounds to the factor.

Decide Video, then paste in a Video URL from YouTube or Vimeo. Instead, the plugin has a Self Hosted tab for importing native movies.

add video link to youtube or local WordPress video background

Step 3: Broaden the peak and width of the video background

By default, the content material block doesn’t stretch to cowl a lot of the web page space. You need to click on the Full Peak button within the editor. There’s additionally a button to increase the video background to fullwidth.

You may also drag or insert content material, comparable to textual content, buttons, or photographs, on prime of the background video.

full height

Step 4: Modify the WordPress video background settings

Modify whichever setting you need within the Block tab: begin time, finish time, looping, all the time enjoying, video opacity.

extra settings for WordPress video background

It’s smart so as to add a background coloration overlay with decreased opacity; this makes the overlaying textual content simpler to learn.

Do that by going to the Block tab and altering the colour to white or black below Background Shade. Transfer the Opacity slider down a bit to make sure the background nonetheless reveals.

adjust opacity

Step 5: View the outcomes

The result’s a video enjoying in entrance of different content material, ideally one which loops, doesn’t have sound, and nonetheless retains a lot of the concentrate on the foreground content material.

Choice 3: Your favourite web page builder plugin

Most web page builders, like Elementor, WPBakery, and Divi, provide background options so as to add a picture or video background to only about any content material module.

➡️ Be at liberty to decide on the web page builder of your liking, however we advocate Elementor as a consequence of its ease-of-use.

Make sure you set up Elementor or whichever builder you plan to make use of earlier than getting began.

Step 1: Open a web page with the Elementor editor

Go to Pages on WordPress, and choose the web page designated as your Homepage. Click on the Edit With Elementor button.

edit with elementor

Step 2: Add a Part content material block

Most content material modules in Elementor provide background settings, however we advocate inserting a Part. That method, you’ll be able to add a number of objects into the part, like textual content, photographs, and buttons. Then, you add a video background to the part in order that it’s behind every little thing within the foreground.

We added some textual content and a button to a bit in our tutorial. Go forward and choose the Edit Part icon, then choose the Model tab.

style for section

Step 3: Insert your video background

Right here, you’ll see a Background dropdown space. Decide the Video choice subsequent to Background Kind. Then paste in a URL from YouTube, Vimeo, or an area file within the Video Hyperlink subject.

add WordPress video background

Step 4: Edit the video background settings

Chances are you’ll have to develop the video background to take up extra of the display screen. To take action, swap to the Structure tab, and alter Peak and Minimal Peak.

minimum height for WordPress video background

Again below the Model tab, take into account altering settings for the background video:

  • Begin time
  • Finish time
  • Play as soon as
  • Play on cellular
  • Privateness mode

Moreover, take into consideration including a Background Overlay—often a impartial coloration like black or white, and a few opacity modifications—to make textual content, buttons, and pictures within the foreground extra seen.

change color overlay for WordPress video background

Step 5: View the WordPress video background on the frontend

While you’re performed, the video performs behind all of the content material within the part!

Choice 4: Use a WordPress theme that helps video backgrounds/headers

Varied WordPress themes provide built-in header, slider, and full-page media settings; these let you add a picture, GIF, or video to take up your complete display screen, most frequently used as a header to your homepage.

To seek out themes with video background options, seek for “video background” on in style marketplaces:

➡️ Make sure you scan characteristic lists, and even ask the developer earlier than downloading/buying, to make sure a theme has video background performance.

For instance, the Colibri WP theme gives video backgrounds.

Step 1: Set up and activate the theme

To activate a video background, set up the Colibri WP theme, then go to Look > Colibri Settings > Get Began. Right here, you’ll be able to activate the Colibri Web page Builder characteristic.

adding page builder feature

Step 2: Add a demo web site

Click on on the Demo Websites tab and Import the demo template of your selecting.

demo sites

Step 3: Customise the Hero picture

Navigate to Look > Customise, and choose the Settings gear icon subsequent to the Hero module.

settings for hero image

Step 4: Add a video background

Choose the Model tab, and swap the Background to Video.

click style and video to add the WordPress video background

Lastly, both choose YouTube to stick in an Exterior Video URL or Self Hosted to add native video.

In consequence, you’ll see the video background in movement on the Customizer preview.

Get began with the right video background

It’s not all the time suggested so as to add a WordPress video background, however you must take into account it when you have high-quality video content material that’s reflective of your model and gained’t hinder your web site’s efficiency.

On this publish, you discovered 4 completely different strategies, at the very least one in all which ought to work on your scenario.

ℹ️ For another methods to enhance your web site, try our publish with 10 parts of a profitable homepage design.

For any questions on WordPress video backgrounds, share your ideas within the feedback under.

Free information

5 Important Tricks to Velocity Up
Your WordPress Website

Scale back your loading time by even 50-80%
simply by following easy suggestions.