Background videos are really helpful when it comes to enhancing the overall feel and appearance of the blog posts on a WordPress based website. Videos are a great way to revamp your post, make it informative, and visually appealing. Integrating videos are important as they help in keeping the things live and exciting to the users. However, the process of embedding videos is a bit challenging on WordPress websites due to many browsers, format, and theme problems, which is quite daunting even to the most seasoned developer. Although CSS has been used actively used for adding background images, but it fails to provide effective solutions when it comes for adding background videos.
We just can’t simply open the CSS put the URL of the MP4 we need to embed and set the size as per our choice to make a video run. In reality, you need to fulfill some of the following conditions to add a perfect video background on your website:
- Wrapping the video in a div
- Set the position of the div to the top-left of the viewport.
- Set the height and width to 100% and z-index to 1 and place the video below the content.
- Now, with the help of JavaScript get that div to its original height and width and then scale up the video without actually altering the original ratio needed to fill the entire screen.
- Catch the resizing event and start scaling again
- While working in Chrome you’ll often notice an annoying scroll bar which generally arrives when div’s z-index is set to 1.
- In iOS devices you need to create the functionality called “click to play” because the feature is disabled on these devices.
The above mentioned tasks sound a bit complicated right? And indeed they are. So, what we can do here, use custom plugin to simplify the whole process of adding video to a WordPress post. The plugin comes complete with a self-contained shortcode which is called: bgvideo. As soon as the code is added to a post’s content, you will be provided with a functional background video. Some of the features that you’ll find in the shortcode are:
- Fixed- determines the position of the video. Here, the background is visible always and scrolls at the top.
- Muted- Assign turn off mode to the sound of the video.
- Loop- Determines whether background should be run constantly
- Ogg- they are the URLs of ogg version of the video
- Autoplay- whether the video should be run automatically as soon as it is loaded by the user
Shortcodes can be generated easily with the help of inbuilt video shortcode.
1. Highlighting the Background
Having a background video with the post definitely makes an impact, but only when it’s not clashing with it. To eliminate anything that’s blocking the visibility of your content or video, you will have to add CSS. In most of the WordPress site, CSS can be added simply by removing the background from the #page element. To do this, we can make use of plugin such as Simple Custom CSS and adding the following code to the child theme.
#page {
background: none;
}
2. Sort Out the Problems with iOS Devices
One of the most frustrating things about iOS devices is that they have the autoplay feature disabled. Apple considers it as a bandwidth issue even if you are using Wifi, thus downloading multimedia files become quite difficult. To fix the issue, it is crucial to provide the URL of an image for the ‘poster’ attribute. This way, the user of the iOS device will view the image instead of the first frame of the video.
Additionally, you’ll also need to create “tap to play” button and use media queries to make it clearly visible on Apple devices.
3. Full Screening the Videos
A fullscreen video occupies the complete browser video and not just the entire display. A video can only be full-screened if the web page has been provided with the enough content. Sites mostly prefer to have videos enabled for full-screen mode for maximum impact.
Although, in what way you go about it is largely dependent on the type of theme you are using. To do this, you need to increase the height of the .entry-header element and make it same with .bgvideo-wrapper element. The JavaScript provided below will show you the actual process.
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);
});
4. Retaining the Look of Sidebar in Chrome
While working in Chrome, you’ll notice a scrollbar when the z-index is set on
.bgvideo-wrapper div. This is not the case with Firefox and Safari. To sort the issue, you need to alter the attribute ‘overflow’ of the HTML element, to ‘hidden’, before resizing the various elements that work together in the background video. After this, set the attribute from ‘overflow’ to ‘auto’.
It’s a true saying that nothing tells a story in quite the way a video does, and when it is blended with the powers of the web, it creates an environment that’s fascinating and interactive for the user. Therefore, implement the above mentioned and increase their engagement
