In this video I show you how to add video background to your WordPress Site. Adding background video to your website will give you the best website design in Tampa. My site is using the Genesis Framework (Genesis will not make a difference in adding your own Video Background.) I used a jquery plugin created by Victa.
This tutorial is only 6 steps. After styling and checking for responsiveness this took about 90 minutes.
Lets Get Started!
Step 1 – Download your files
Download or clone the files we are going to need from GitHub.
git clone https://github.com/Victa/HTML5-Background-Video.git
Extract the contents of the zip file and find and upload
jquery.backgroundvideo.min.jsto your child themes /js directory. If there isn't a js directory create one in your themes root and upload. The correct path should be
/public_html/wp-content/themes/YOURTHEME/js/jquery.backgroundvideo.min.jsStep 2 - Create your init.js file
Open your text editor and create a file named
jquery.backgroundvideo.init.js. Add the code below to the file and change the "PATH" to your correct path and then upload to your themes /js directory as well.
jQuery(function( $ ){
var videobackground = new $.backgroundVideo($('.bg-video'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "public_html/wp-content/themes/YOURTHEME_NAME/media/video/",
"filename": "cloud",
"types": ["mp4","ogg","webm"]
});
});
Step 3 - Upload the video files
To get started just upload the video files that came in the demo to your child themes
public_html/wp-content/themes/YOURTHEME_NAME/media/video/directory. If these directories do not exist, create them and upload.
** If you are using your own video don't forget to change the height and width dimensions in your
jquery.backgroundvideo.init.jscode **
Step 4 - Add the new video section to your theme
This part is going to be personal/theme preference. I added my video background section after the header by hooking into
genesis_after_header. Also I am only adding the video to my Homepage. Copy the code below and paste it into you child theme's functions.php file.
** I also removed the Site Description from my theme **
//* Remove the site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
//* Enqueue jQuery - Background video
add_action( 'wp_enqueue_scripts', 'enqueue_html5_background_video' );
function enqueue_html5_background_video() {
if ( (is_home() || is_front_page()) && !wp_is_mobile() ) {
wp_enqueue_script( 'backgroundvideo', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backgroundvideo.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'backgroundvideo-init', get_stylesheet_directory_uri() . '/js/jquery.backgroundvideo.init.js', array( 'backgroundvideo' ), '1.0.0', true );
}
}
add_action( 'genesis_after_header', 'developingdesigns_background_video' );
function developingdesigns_background_video() {
if ( is_home() || is_front_page() ) {
echo '<section class="background-video">
<div class="wrap">
<div class="video-caption">
<div class="video-headline">Video Headline Area</div>
<div class="video-tagline">Video tagline. Vivamus aliquet elit ac nisl. Etiam ultricies nisi vel augue. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Fusce risus nisl, viverra et, tempor et, pretium in, sapien.</div>
</div>
</div>
</section>';
}
}
</srv/bindings/3667774321724b47bbb3b8be669f05fe/code>
</pre>
What are we doing with the code above...
- 1. Removing the Site Description
- 2. Enqueueing our to .js files we uploaded to our /js directory in Steps 1 and 2
- 3. Write a PHP if statement that will only show this section on the homepage. Then we are hooking into the after_header section and adding a new section with the class: "background-video" that will only display on the homepage
Step 5 - Style to new section
Now that we have added the new section with the "background-video" class to our WordPress theme it's time to give it some style to make it fit right. Add the code below to your style.css file and then we are almost through add video background to your WordPress site.
a img {
margin-bottom: 0;
}
.site-title {
margin-bottom: 0;
}
.site-header .wrap {
padding: 0;
}
.nav-header a {
padding: 1.8rem 2.4rem;
}
.background-video .wrap {
text-align: center;
}
.background-video .video-caption {
text-align: center;
color: #fff;
padding: 200px 0;
}
.background-video .video-caption .video-headline {
font-size: 34px;
text-shadow: 3px 3px rgba(0, 0, 0, 0.1);
font-weight: bold;
}
.background-video .video-caption .video-tagline {
font-size: 28px;
}
.background-video .video-tagline a {
border-bottom: 1px dotted #fff;
color: #fff;
}
@media only screen and (max-width: 480px) {
.bg-video {
background: url('media/video/cloud.jpg') no-repeat center center;
background-size: cover;
padding-top: 50px;
padding-bottom: 50px;
}
}
** Precise styling will be dependent upon your own theme styles **
Step 6 - Start Debugging
If the background video is playing in the main article area of your site just add the code below or something similar to your style.css file:
@media only screen and (min-width: 1025px) {
.home .site-inner {
max-width: none;
background: #fff;
}
.home .content-sidebar-wrap {
max-width: 1140px;
margin: 0 auto;
}
}
If you noticed I am only showing displaying the video at screen sizes above 480px. The reason I am doing this is because the video loads slowly on mobile devices. Thus at the 480px breakpoint the video defaults to the image we uploaded earlier.
** Also after make sure your videos are not set to a max width of 100%. As this did not make it too responsive. **
If you need help with add video background to your WordPress site or anything relating to web design, SEO or SEM services. Don't hesitate to Hire Me for your next website design in Tampa or throughout the country.
Thanks to Sridhar Katakam.
If anyone has any questions regarding this tutorial feel free to ask them within the comment area. If you need help with SEO or Web Design Services in Tampa or wherever you are please fill out my contact form. Also, dont forget we specialize in custom WordPress development.