Basic Guide To Adding Background Videos To WordPress Site

Add Tool

A Basic Guide To Adding Background Videos To WordPress Site


A Basic Guide To Adding Background Videos To WordPress Site

Adding fullscreen background video to websites seems to be gaining wide popularity among users. In fact, many niche brans have already included background videos in their landing pages in a bid to make them more interesting to site visitors. Adding the videos in the background judiciously, can help you successfully grab the attention of online surfers towards your site.

What's more? Background videos, even help engage a visitor to your site more longer compared to providing them with well-written text. This is simply because a video help users understand things in a more better and quick way, compared to reading words. Many users, however, find difficulty in adding background videos to their WordPress website. That's because, they need to take care of a lot of things like checking out if the video is compatible with the theme or the user's browser or not.

While you can work with CSS to add fullscreen background images to your site, but it won't provide any solution when you need to add background videos to the site. This post will serve as a handy guide for beginners who would like to become familiar with the process of adding background videos to a WP powered site.

Steps You Need to Perform For Adding Background Video

  1. You'll have to wrap the video in a div.
  2. Next, you need to set the position of the div containing your video element absolutely to any viewport top-left. And then, make sure that the div's width and height of the is being set to 100% and the z-index to 1. This will help place the video below your website main content.
  3. In order to scale the video in a manner that it fits properly in the entire screen, requires you to make use of javascript, so that you can get that div's original value of width and height.
  4. You'll need to catch the screen resize event for scaling the video again.
  5. While setting the z index of the div in Google Chrome you may encounter a scrollbar issue. Make sure to fix that issue.
  6. Make sure that all of the iOS devices (such as iPads and iPhones) having the functionality of "click to play" contain "video autoplay" feature set to disabled.

Getting the aforementioned list of tasks for adding background videos to WordPress posts will definitely give novices a hard time. However, you can get the job done in a rather simplified manner, by using a plugin. For doing so, you'll have to perform the following steps:

Step 1 – Using Plugin to Embed Video Shortcode:

Background Video is a great plugin, you can use for adding a background video to your posts. This plugin comes integrated with a "bgvideo" shortcode. Adding the shortcode to your post's content, helps generate a background video. Let's see a few attributes that this shortcode needs to be passed:

  • Fixed: determines if your video contains a fixed position, i.e., you can view the background when scrolling to the top of the page.
  • Muted: identifies whether the audio needs to be set in turned-off mode.
  • Loop: determines if the background video will run on a continuous basis or not.
  • Autoplay: setting this argument will let you make the background video play automatically once it's loaded.
  • Ogg: this can be used for specifying the video's Ogg version URL
  • Webm: determines the video's WebM version URL
  • Mp4: this argument specifies the video mp4 version URL
  • Width: width of the video
  • Height: height of the video

Implementing a shortcode to add background video in your post is an easy-to-follow way. When choosing this technique, all you need to do is to choose a video and then embed it into the post with help of "Add Media" button on the post editor screen. Next, move into text mode and make changes to the video shortcode, by changing it into bgvideo shortcode. Lastly, you only need to add the source in the form of an attribute. For example, the below given video shortcode:

[*video width="1100" height="620" mp4="http://www.example.com/wp-content/uploads/2015/09/xyz.mp4"][/video]
[*video width="1100" height="620" webm="http://www.example.com/wp-content/uploads/2015/09/xyz.webm"][/video]
<a href="http://www.example.com/wp-content/uploads/2015/09/xyz-cover.jpg"><img src="http://www.example.com/wp-content/uploads/2015/09/xyz-cover-1024×576.jpg"alt="xyz-cover"width="1024"height="576"class="alignnone size-large wp-image-12"/></a>

Note: Make sure to get rid of the star (*) before you use the above code.
Let's see how the code looks like when we change the existing video shortcode with the bgvideo shortcode:

[bgvideo width="1100" height="620" mp4="http://www.example.com/wp-content/uploads/2015/09/xyz .mp4" webm="http://www.example.com/wp-content/uploads/2015/09/xyz .webm" poster="http://www.example.com/wp-content/uploads/2015/09/xyz-cover-1024×576.jpg" fixed="no"]

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

Step 2 – Making the Background Visible

Although you now have a background video added to the post, it may not be visible on the front-end if it's applied to your website content. And thus, you'll have to eliminate things that are blocking your video. For this purpose, you can add a custom CSS. While working with CSS for a WordPress theme, simply remove "#page" element's background. This requires you to add the following CSS to your website child theme or you can choose to use a plugin such as Simple Custom CSS instead:

#page {
background: none;
}

Step 3 – Making Your Video Switch to Fullscreen

Till now, a full screen background video will only fit properly according to the full browser window, but it won't adapt according to the entire display. In fact, your background video would properly open up in the complete browser window when you've enough content to display. Remember that making your video, switch to fullscreen, will help increase the video impact on viewers. This is why sites having video added in the background, ensure that the video runs in the full-browser window.

To use this technique, you'll mostly have to rely upon your theme. Let's consider an example where you need to make your video go fullscreen for WP theme Isola:

Increase the height of your post header equal to the browser's full height. To do so, simply expand the height of the element ".entry-header" to the height of the element ".bgvideo-wrapper" (i.e. 100%). This can be accomplished using the below JavaScript code snippet:

<script>
   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);
     
    });
</script>

This code will make sure that the response of the video's height changes according to the browser window size it is being accessed on.

Conclusion

Hope that reading this post will make you learn about the steps following which you can add a background video in your WordPress website.

 

About Mike swan

Mike swan is professional WordPress developer and helps users in converting PSD to wordpress theme services. He loves to share his experiences in web design and web development trends.


Tags: video background website template, video background website tutorial, video background website wordpress, video background website download, video background website template free download
Payza

About Masum Billah

A Basic Guide To Adding Background Videos To WordPress Site 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: Basic Guide To Adding Background Videos To WordPress Site


adf.ly