01 Feb How to Add Video as Fullscreen Background in WordPress

Videos are awesome, they provide more catching media and capture more emotions than picture.

Now-a-days more and more webmaster/brands are moving towards embedding videos as complete background in their website. But, the complexity of embedding the video to the background takes some technical expertise.

To make everything simple and great for our readers, we will list a free plugin to embedded videos to the background and also go through a detailed tutorial on how to embed videos into the background with simple configurations.

Note: Some coding experience is needed to completely understand the content. Feel free to ask questions in the comments, if something looks confusing.

Plugin to Add Video as full-screen background in WordPress

Plugins are great, they provide the required functionality with few clicks. I will list few plugins before moving on to the detailed tutorial on how to embedded videos into the background using coding.

1. mb.YTPlayer for background videos

One of the popular video plugin for background integration. The plugin integrates a custom player inside the element of the page.

With the plugin, users can easily integrate the videos in pages and post. The installation is simple and the plugin generates a shortcode for easy integration.

The plugin doesn’t support responsive layout completely.

Full Detail and Download | Demo

2. Slider Hero with Animation Effects

The motive of the plugin is to enable you to embed video background in WordPress with slider effects. The plugin offers 11 background animations, ability to add background music, YouTube and Vimeo video integration, etc.

The plugin is compatible with any WordPress theme or editor like Gutenberg so it will be responsive and fast on all WordPress websites.

Full Detail and Download | Demo

Now, comes the real part. The next part requires coding and technical workings of WordPress platform.

Video embedding requires a lot of steps. Let’s go through the steps one by one. Once you understand those steps, you can get the grasp of how complicated a simple thing can become.

1. Using Div to make space for the video.

2. Get the Div positioning to the top left of the viewport in either absolute or fixed. Next step is to set its height and width to 100% and then setting the z-index to 1. Z-index defines the depth of the content.

3. Scaling Div Video using JavaScript.

4. Monitor Screen resizes and again scale video every time user scales the video.

5. Make sure that the code works on different browsers and mobile OS.

Looks like a lot of coding, but we will be using a simple custom plugin to automate the process of embedding video to the background of the WordPress post or pages.

BGVIDEO: Download

Download the plugin and proceed through a normal installation(just like other plugins installation).

This simple plugin works in tandem with shortcode and a shortcode named “bgvideo” is available in the plugin. The shortcode acts as a gateway to embed video into any pages or posts.

Before moving on, we need to feed some parameters to the shortcode for its complete functionality.

The parameters are height, width, mp4, webm, ogg, autoplay, loop, muted and fixed. The height and width refer to the video’s height and width respectively. The mp4, webm, ogg fields refers to the URL of the respective video format. It is necessary that you provide the URL of each format so that the video runs on multiple devices without any problem.

Adding Videos to the Media Library

The next step includes adding videos to the media library. Make sure that you add all the formats(webm, ogg, mp4) into the media library.

With the help of the bgvideo, the video shortcodes are transformed into the bgvideo.

The video shortcode looks like below

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video width=”1280″ height=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

Do not forget to remove the percentage(%) sign in front of video shortcode and anchor tag.

With the help of the bgvideo, the above code will transoform to the below code

[bgvideo width="1280" height="720" 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  poster="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  fixed="no"]

The plugin automatically changes the video shortcode to the bgvideo shortcode.

Making the Video Transparent to the user

With everything setup, you need to do a little magic in the page CSS property. The reason is the fact that the content of the page hinders the display of the video.

The CSS will remove the content of the page and let the shine the video for your visitors.

Insert the below CSS code to make everything work fine.

#page{

background:none;

}

There are lots of other tweaks that are needed to completely setup the video background.

Wrap Up

The best bet for our readers is to use a full-fledged plugin and ignore the coding part — the coding part will only make things worse if you do not know coding. You can divert the need to your developers, but that doesn’t come free.

Another great alternative solution is the use of animated GIFS as the background. There are two reasons that stands for the use of animated GIFS. The first one is the low-bandwidth usage in comparison to the video and the second one is easy installation. Another great advantage is that you probably don’t need to worry about portability and other devices compatibility issues.

The animation can be easily formed using the CSS or uploaded through the normal background changing.

The complexity of video background is little bit on the higher side and WordPress community or core team can take note of it and do changes in their upcoming releases.

If you have a video and want to convert to a gif, then there are online resource that can do it for you. But the converted GIF are not optimized and carry a lot of weight with them.

And when you need to make adjustments to the video you’re planning to embed, you can find a few great free video editors. You may need to cut, crop, or zoom a video, add text, or probably adjust the color theme to make it match the style of your website.

If you’re on Mac, naturally, you can go with iMovie because it’s already pre-installed on your computer (if not, you can get it for free). And if you’re on Windows – VSDC Free Video Editor is a great choice. It has literally everything you might need from the basic splitting/cropping toolset to color correction and video style presets. Plus, it’s really powerful when it comes to formats, and you won’t need to sacrifice the quality of the output file.

Do you think, I missed something? Comment below and let us know.

*last updated 02/25/2019