Video Background – Aspire Pro Theme

A video background on Aspire-Pro instead of a static image.

To begin, we need to-
Download/Install and activate Video-Background  by Blake Wilson, to your website.

on the Static Front Page (front-page.php) document inside the Aspire-Pro theme find the code at the bottom, that looks like this-

genesis_widget_area( 'front-page-13', array(
		'before' => '<div id="front-page-13" class="front-page-13"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
}

And before the very last curly braces copy and paste the following code-

echo do_shortcode('[vidbg container="WHERE-YOU-WANT-THE-VIDEO-TO-DISPLAY" mp4="#" webm="#" poster="#" loop="true" overlay="true" overlay_color="#000" overlay_alpha="0.3" muted="true"]');

So it should now look like this-

genesis_widget_area( 'front-page-13', array(
		'before' => '<div id="front-page-13" class="front-page-13"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

echo do_shortcode('[vidbg container="WHERE-YOU-WANT-THE-VIDEO-TO-DISPLAY" mp4="#" webm="#" poster="#" loop="true" overlay="true" overlay_color="#000" overlay_alpha="0.3" muted="true"]');

}

Next upload the video in “webm” and “mp4” format to your media library.
Copy and paste the URL’s of both videos into their respective areas, replacing the “#” symbol in the above code.
Using Chrome developer tools or Firebug etc find the ID or class of the container that you wish to have the Video Background in, in this case it is the first section #front-page-1 or .front-page-1 and place the class or ID in the container area.
There are also options to use an image if videos have been disabled again just add the URL from your media library to pull in the relevant image. Do you wish the video to keep looping? this is “false” for no or “true” for yes.
An overlay on the video will allow for text to be seen more clearly is also available.
Lastly do you wish the sound to be on or off (muted), “false” for no, “true” for yes.

Now you know what all the parameters are your code should now look something similar to this-

echo do_shortcode('[vidbg container="#front-page-1" mp4="https://geckografix.guru/wp-content/uploads/2017/05/Video-Promocional-Barcelona-1.mp4" webm="https://geckografix.guru/wp-content/uploads/2017/05/Video-Promocional-Barcelona-1.webm" poster="https://geckografix.guru/wp-content/uploads/2017/05/barcelona-2014-exterior.jpg" loop="true" overlay="true" overlay_color="#000" overlay_alpha="0.3" muted="true"]');

Lastly to ensure it plays nicely on mobile devices we need to place a couple of lines in our style.css sheet, at the very end of the stylesheet copy and paste this-

.vidbg-container video{
	max-width:none !important;
}

and thats it done

[/sociallocker]