Select Page


Looking for the simplest technique to add a WordPress video background?

Properly-made video backgrounds seize consideration and make manufacturers look cool from the very begin. However when completed poorly, a video background slows down your web site, takes up house, and confuses new guests. That’s why we made this information so that you could keep away from all pitfalls, and as a substitute, be taught easy methods to add a WordPress video background the fitting method.

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

Finest 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 litter your interface; solely use them to make a degree or showcase one thing related.
  • Embrace a name to motion with extra info: Don’t go away 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 need to view your web site.
  • If audio is required, don’t have it on autoplay: Present an possibility for customers to play audio.
  • Contemplate closed captions for movies with audio: Not everybody can take heed to your audio, whether or not that’s due to their location or listening to impairment.
  • Host externally: Your web site host in all probability isn’t designed to serve movies, so select websites like Vimeo and YouTube to keep up efficiency, or think about a specialty video internet hosting web site.
  • Follow one of the best codecs/resolutions: We’re speaking MP4s solely; a minimal of 720p; h264 codec.

And bear in mind, not all web sites want video; generally it simply makes the interface cluttered, gradual, and unfocused. A lawyer, for instance, ought to keep on with skilled photographs moderately than corny handshaking movies which are certain to decelerate their web site.

How you can add a WordPress video background

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

We’re going to give attention to 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 technique beneath. 👇

Choice 1: Constructed-in Cowl block

The native WordPress editor affords what’s referred to as a Cowl block to insert background photos behind different content material, similar 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 need 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 getting 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 might be welcome so as to add foreground blocks to the Cowl, similar to textual content or buttons.

content in foreground

Step 4: Edit the Cowl settings as wanted

Cowl settings embody:

  • Coloration overlays: superb for making it simpler to learn textual content
  • Opacity: additionally useful for revealing foreground content material
  • Minimal top of canopy: generally essential to make the WordPress video background cowl extra space
opacity of overlay

Step 5: View your WordPress video background in motion

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

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

These are one of the best video background plugins:

➡️ Our favourite is the Superior WordPress Backgrounds plugin; we’ll present you easy methods 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 need 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 colour, picture, or video backgrounds to the component.

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

add video link to youtube or local WordPress video background

Step 3: Increase 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 Top button within the editor. There’s additionally a button to increase the video background to fullwidth.

It’s also possible to drag or insert content material, similar to textual content, buttons, or photos, on prime of the background video.

full height

Step 4: Modify the WordPress video background settings

Regulate whichever setting you need within the Block tab: begin time, finish time, looping, at all times taking part in, video opacity.

extra settings for WordPress video background

It’s sensible so as to add a background colour 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 beneath Background Coloration. 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 taking part in in entrance of different content material, ideally one which loops, doesn’t have sound, and nonetheless retains many of the give attention to 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 happy to decide on the web page builder of your liking, however we advocate Elementor because of its ease-of-use.

Remember to 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, photos, 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 possibility subsequent to Background Sort. Then paste in a URL from YouTube, Vimeo, or a neighborhood file within the Video Hyperlink subject.

add WordPress video background

Step 4: Edit the video background settings

You might have to broaden the video background to take up extra of the display screen. To take action, swap to the Structure tab, and regulate Top and Minimal Top.

minimum height for WordPress video background

Again beneath the Model tab, think about altering settings for the background video:

  • Begin time
  • Finish time
  • Play as soon as
  • Play on cell
  • Privateness mode
settings

Moreover, take into consideration including a Background Overlay—normally a impartial colour like black or white, and a few opacity adjustments—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 completed, 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 permit you to add a picture, GIF, or video to take up your entire display screen, most frequently used as a header to your homepage.

To search out themes with video background options, seek for “video background” on common marketplaces:

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

For example, the Colibri WP theme affords 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.

Because of this, you’ll see the video background in movement on the Customizer preview.

Get began with the proper video background

It’s not at all times suggested so as to add a WordPress video background, however you need to think about it when you’ve got high-quality video content material that’s reflective of your model and gained’t hinder your web site’s efficiency.

On this put up, you realized 4 completely different strategies, at the very least certainly one of which ought to work in your scenario.

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

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

Free information

5 Important Tricks to Pace Up
Your WordPress Web site

Cut back your loading time by even 50-80%
simply by following easy ideas.