Create fullscreen video background (JavaScript version)

Yesterday I’ve posted a guide for creating a fullscreen video background using PHP, but altering theme’s core files is more for advanced users and less for intermediate and beginners. That’s why I’ve came up with this new version that involves using plugins and JavaScript and not touch any files.

The needs for this are the same, adding a video container right after the opening tag, but to add it we will inject some JavaScript only on the page we need to have the video background. For this we will need a plugin like Simple JS Paste (not available anymore in WordPress plugins repository) which is a bit old, but simple enough for our needs and still works with latest versions of WordPress. Alternatively, there are many plugins available on WP repository that does the same thing (and most of them offers additional functionality that I was not interested in), like Header and Footer Scripts, Head, Footer and Post Injections or Code Embed (this last one is a bit trickier to use). What to keep in mind is that we need a plugin that adds the code in the page/post not globally on the whole website. That means that the code will be used only when that particular page is loaded, not loaded by default in all pages, even if it’s not used, cluttering the code.

Plugins like Simple JS Paste adds a meta box on each page or post editor, and there is where we’re gonna add the JS that will inject the video background.

This is the code that we’ll need to add in order to inject our video container and video to the page:

<script> 
jQuery(document).ready( function($) {
	$('body').prepend('<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>'); }); 
</script>

Please note that, unlike the PHP version where the HTML code can have each tag on a separate line, the part of the script that defines the HTML video container in the script must be in a single line, otherwhise will not work.

With this in place, all we need more is the CSS, which is the same as on the PHP version of the guide.

.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 */
/* remove this if you want videos to play on mobiles too */
@media all and (max-width: 767px) {
	.video-bg-container {
		background: url('poster.jpg') no-repeat 50% / cover;
	}
	.bg-video {
		display: none;
	}
}

The CSS can be added in several locations:

• Appearence > Customize > Additional CSS
• theme’s Custom CSS field (if the theme have it)
• child theme’s style.css file
• using a plugin that adds a CSS field in page/post editor, just like we used for JavaScript – on this guide I’ve used WP Add Custom CSS plugin

All done. Enjoy.