Videos dramatically increase the value of WordPress posts. They are not only eye-catching, but also attention-grabbing. With the help of a video, a viewer can understand your post far more clearly and quickly, than he would have, if there were only words to read.

wordpress background videoImage Courtesy: premium.wpmudev.org

However, it is quite difficult to add videos in the background of your WordPress posts. The job involves several format, browser and theme problems, which can annoy even the proficient developers. Though CSS works in case of background images, it does not provide any solution when it comes to creating fullscreen background videos. The job is not as simple as opening the CSS, putting the MP4 video URL inside the background clause and setting the size such that the video covers the full screen.

In reality, to add a background video, you need to:

  • Wrap the video inside a div

  • Position that div exactly to the viewport’s top-left, set its width and height to 100% and the z-index to 1 so as to place the video beneath the main content.

  • Use javascript for getting that div’s actual width and height, and then scale up the video while keeping the original ratio such that it fills the entire screen.

  • Catch the event of screen resize to perform the scaling again.

  • Fix the scroll bar issue, which arises in Chrome when you set the z-index to -1.

  • Create the functionality of “click to play” for all iOS devices, as iPads and iPhones have the feature of video autoplay as disabled.

These tasks may appear as troublesome. Therefore, we will use a custom plugin, which will simplify the job of adding videos to WordPress posts. Here are the steps you need to take to accomplish the task of adding a background video successfully:

Bring Background Video to WordPress Post using Plugin:

Firstly, download, install and activate the Background Video plugin. The plugin has a self-contained bgvideo shortcode. When you add this shortcode to the content of a post, a background video is generated. The attributes taken by the shortcode are:

  • Fixed: whether the video has a fixed positioning, i.e., the background is visible always and scrolls to the top (default value is yes)

  • Muted: whether the audio should be in turned off mode (default value is yes)

  • Loop: whether the background video should run continuously (default value is yes)

  • Autoplay: whether the background video should begin playing immediately after loading (default value is yes)

  • Ogg: url for the video’s Ogg version

  • Webm: url for the video’s WebM version

  • Mp4: url for the video’s mp4 version

  • Width: the video’s native width

  • Height: the video’s native height

Going for the shortcode is an easier way because you can easily generate the shortcode by using the inbuilt video shortcode.

Select a video and insert it into the post using the Add Media button present in post editor. Now, switch to text mode and change the video shortcode into bgvideo shortcode. The source should be added as an attribute.

insert video in wordpressImage Courtesy: premium.wpmudev.org

For instance, the following video shortcode


[*video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4″][/video]
 
[*video width=”1280″ height=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/rainier.webm”][/video]
 
<ahref=”http://www.test.dev/wp-content/uploads/2014/09/rainier-cover.jpg”><imgsrc=”http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024×576.jpg”alt=”rainier-cover”width=”1024″height=”576″class=”alignnone size-large wp-image-1392″/></a>

Note: Remove the star (*) before using the above code

is changed into the following bgvideo shortcode


[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-1024×576.jpg” fixed=”no”]

Once you download, install and activate the plugin, the shortcode of bgvideo will turn into background video.

Enable the Background to Shine through:

Even if you have a background video, it will remain hidden if a background has been applied to your content. To eliminate things that may block your video, you will have to add custom CSS. In most of the WordPress themes, this can be done by removing the #page element’s background. To do this, add the CSS appearing below, to the child theme. You can also do it with the help of a plugin like Simple Custom CSS:

#page {
background: none;
}
 

Fix the Issues occurring in iOS Devices:

video in wordpressImage Courtesy: premium.wpmudev.org

One of the most irritating problems in iOS devices is that they have the feature of autoplay as disabled. To sort out the problem, you need to provide the URL of an image for the attribute of poster. When you do this, the user of an iOS device will see this image in place of the video’s first frame. You will also have to create a “tap to play” button. Use media queries to display this button only on the Apple mobile devices. The background video starts playing when the user of an iOS device taps this button. Although not a perfect solution, this would at least allow the users to watch your video.

Make the Video go Fullscreen:

A fullscreen video occupies the full browser window, and not the entire display available. Your background video would take the complete browser window only if you have enough content. By making your video go fullscreen, you can immensely boost up the impact of the video. This the reason why most websites that have video in the background, make sure that their video runs in the full browser window.

The technique to be used to make this happen depends largely on your theme. However, here is a rough guide in which the theme is Isola:

Expand the header of the post to the browser’s full height. For this, you need to expand the .entry-header element’s height to the .bgvideo-wrapper element’s height. You are likely to know that the .bgvideo-wrapper element’s height is already 100%. Below is the javascript to accomplish this:

jQuery(document).ready(function(){
 
varthe_height=jQuery(‘.bgvideo-wrapper’).height();
jQuery(‘header.entry-header’).height(the_height);
});
 
jQuery(window).resize(function(){
 
varthe_height=jQuery(‘.bgvideo-wrapper’).height();
jQuery(‘header.entry-header’).height(the_height);
 
});
 

Please note that both the (window).resize event and the (document).ready event have the function attached to them. This ensures the response of the height to changes in browser window size.

Prevent the Appearance of Sidebar in Chrome:

In Chrome, a scrollbar appears when the z-index is set on .bgvideo-wrapper div. This problem does not arise in Firefox or Safari. To fix this issue, set the property of overflow for html element, to hidden, prior to resizing the elements of the background video. After you have completed resizing, set the overflow property to auto.

By following these steps, you can add background videos in your WordPress posts, and thereby make your posts stand out of the crowd.