Create fullscreen video background (PHP version)

Aug 9, 2017 | Wordpress

Wordpress can handle image backgrounds very well, but there are times when images are not enough and you want a video background to massively enhance your website’s look and feel. Unfortunately, that’s not something WordPress by itself is able to handle and relies on themes to do that. Some themes have implemented a video background, but most didn’t. Let’s try here to not rely on any theme to do the trick and instead do it ourselves.

First and foremost, whenever you are adding, deleting or modifying anything to your website, it’s highly recommended to use a child theme. The interweb is packed with guides and tutorials about child themes, so I won’t get into details.

Since CSS handles only image backgrounds, we’ll have to pull some tricks out of our sleeves. What we’re gonna need is a container for that video that will be placed below all the website’s content. To do that we’re gonna need a <div> element inserted just under the opening <body> tag, and for that we’re gonna use a function placed in our child theme’s functions.php. But not all themes have a hook that runs immediately after the opening <body> tag, so we’ll first need to copy the header.php file from the parent theme over the child theme and add that hook. Edit header.php in your child theme and right below the

<body <?php body_class(); ?> >

we’re gonna add the hook:

<body <?php body_class(); >>
<?php do_action('after_body_open_tag'); ?>;

With this in place, we can add the function into the functions.php file:

function custom_content_after_body_open_tag() { ?>

// The video background will be inserted here

<?php }
add_action('after_body_open_tag', 'custom_content_after_body_open_tag');

With all this in place, we can focus now on the video container and the video background. For this we’ll need the good old HTML:

<div class="video-bg-container">
	<video loop muted autoplay poster="poster.jpg" class="bg-video">
		<source src="video-file.webm" type="video/webm">
		<source src="video-file.mp4" type="video/mp4">
	</video>
</div>

So in the end we’ll have the final function that will look like this:

function custom_content_after_body_open_tag() { ?>
	<div class="video-bg-container">
		<video loop muted autoplay poster="poster.jpg" class="bg-video">
			<source src="video-file.webm" type="video/webm">
			<source src="video-file.mp4" type="video/mp4">
		</video>
	</div>
<?php }

add_action('after_body_open_tag', 'custom_content_after_body_open_tag');

Then we need to add some CSS to style everything up:

.video-bg-container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: -100;
}
.bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Media queries to keep aspect ratio over different devices */
@media (min-aspect-ratio: 16/9) {
	.bg-video {
		height: 300%;
		top: -100%;
	}
}
@media (max-aspect-ratio: 16/9) {
	.bg-video {
		width: 300%;
		left: -100%;
		max-width: initial; /* reset for some themes that have predefined widths for <video> elements */
	}
}
/* Replace video with image on mobile devices */
@media all and (max-width: 767px) {
	.video-bg-container {
		background: url('poster.jpg') no-repeat 50% / cover;
	}
	.bg-video {
		display: none;
	}
}

What we also need to do is disable the video background on mobile and replace it with an image background. We want to do that for 2 reasons: the large data consumption on mobile and, maybe of higher importance, some mobile platforms are not able to autoplay HTML5 videos and will display it on top of the content as an embedded video player with a play button.

So there you have it, a fancy fullscreen video background with only a bit of PHP, a touch of HTML and some CSS to spice everything up. We could use a bit of JavaScript instead of the PHP, but that’s for another time so let’s see the other guide about how to Create fullscreen video background using Javascript.