Implementing Custom Background Videos in WordPress Themes
Posted on 20th June 2023
In this article we’re going to take a look at how to implement custom background videos in WordPress themes.
The first thing you need to do is install and activate the Video Background plugin. For more information, see our step by step guide on how to install a WordPress plugin.
Once the plugin is activated, you need to edit the post or page where you want to add the background video.
On the post edit screen, you will see the new Video Background metabox. Here you need to select a video from the Media Library or enter the URL of the video you want to use as the background.
You can also enter a poster image. This image will be displayed until the video starts playing.
Once you have selected a video, you need to click on the Add Video Background button to save your changes.
Your background video will now be added to the post or page.
If you want to add the background video to all posts and pages, then you can do that from the plugin settings page.
Go to Settings » Video Background to configure plugin settings.
On the plugin settings page, you need to select the video you want to use as the global background video. You can also enter a poster image and video start and end time.
Don’t forget to click on the Save Changes button to store your settings.
Your background video will now be added to all posts and pages on your WordPress site.
You can also use the shortcode to add the background video to any post or page.
Simply add the following shortcode in the post or page where you want to display the background video.
[video_background]
This shortcode accepts one parameter which is the URL of the video you want to use as the background.
You can also use the following shortcode to add the background video to a WordPress widget.
[video_background widget=”1″]
Replace 1 with the ID of the widget where you want to display the background video.
We hope this article helped you learn how to add background videos in WordPress. You may also want to see our list of the best video WordPress themes.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
To implement a custom background video in a WordPress theme, you will need to add some code to your functions.php file and enqueue the video file.
First, you will need to register the video file with WordPress. To do this, add the following code to your functions.php file:
function my_custom_background_video() {
$video_url = ‘https://www.mywebsite.com/video.mp4’;
$poster_url = ‘https://www.mywebsite.com/poster.jpg’;
$args = array(
‘url’ => $video_url,
‘poster’ => $poster_url,
‘width’ => 1920,
‘height’ => 1080,
);
register_theme_feature( ‘custom-background-video’, $args );
}
add_action( ‘init’, ‘my_custom_background_video’ );
Next, you will need to enqueue the video file. To do this, add the following code to your functions.php file:
function my_custom_background_video_scripts() {
wp_enqueue_script( ‘custom-background-video’, get_template_directory_uri() . ‘/js/custom-background-video.js’, array( ‘jquery’ ), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_custom_background_video_scripts’ );
Finally, you will need to add some CSS to your style.css file to make the video fullscreen. Add the following code to your style.css file:
.custom-background-video {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
That’s it! You should now have a custom background video in your WordPress theme.
There are a few things we need to do in order to get our video to play automatically. The first is to add the video to our WordPress media library.
To do this, go to your WordPress dashboard and click on Media > Add New.
Upload your video file and then copy the video URL.
Next, we need to add a few lines of code to our WordPress theme.
First, we need to enqueue the video file. Add the following code to your theme’s functions.php file:
function my_custom_scripts() {
wp_enqueue_script( ‘my-custom-script’, get_stylesheet_directory_uri() . ‘/js/my-custom-script.js’, array( ‘jquery’ ), ‘1.0’, true ); } add_action( ‘wp_enqueue_scripts’, ‘my_custom_scripts’ );
Next, we need to create a new file called my-custom-script.js and upload it to our theme’s /js/ directory.
In this file, we’ll add the following code:
jQuery(document).ready(function($){ var video = $(“#my-video”).get(0); video.play(); });
Replace #my-video with the ID of your video element.
Save your changes and upload the file to your server.
Now when you visit your WordPress site, the video should start playing automatically.
Before we get started, you need to have a self-hosted WordPress site and a child theme. If you’re not sure what a child theme is, please read our guide on the topic. For this tutorial, we’ll be using the Storefront child theme by WooCommerce. You can download it for free from the WordPress.org repository.
Once you have the theme installed and activated, you need to download the video you want to use as your background and upload it to your WordPress media library. The video should be in .mp4 format and have a resolution of at least 1920×1080px.
Now that you have your video ready, open up your child theme’s functions.php file and paste the following code at the bottom:
function child_theme_background_video() {
$video_id = ‘background-video’; // Replace with your video’s ID
$video_url = wp_get_attachment_url( $video_id ); // Replace with your video’s URL
$video_poster = wp_get_attachment_url( $video_id . ‘-poster’ ); // Replace with your video’s poster URL
if ( $video_id && $video_url ) { ?>
# {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1000;
}
#-poster {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1001;
}
<video autoplay muted loop id="”>
<source src="” type=”video/mp4″>
<img src="” id=”-poster”>
<?php
}
}
add_action( 'wp_head', 'child_theme_background_video' );
In the code above, we’re first defining the video ID and URL. You need to replace them with your own values. The video ID is the attachment ID of the video in your WordPress media library. You can get it by opening up the video in the library and copying the number in the URL.
For the video URL, we’re using the wp_get_attachment_url() function. This function takes the attachment ID as a parameter and outputs the URL of the attachment.
We’re also defining a poster URL. This is the URL of the image that will be shown before the video starts playing. You can use any image you want here. If you don’t want to show a poster image, you can delete the code for the $video_poster variable and the corresponding tag in the next block of code.
After that, we’re using a bit of CSS to position the video and the poster image on the page. You can change the CSS to better fit your needs.
Finally, we’re outputting the
If you want to learn more about the
Save your changes and open up your site in a new tab. You should see the background video playing.
