Redux Video Background Module

Looping video backgrounds are very popular on home pages. I decided to make a homepage module so WordPress users could quickly build one on their home pages. Users only need a short video clip and some homepage module settings to complete this task. The configuration options for this module are: 

  • Select a video (mp4) from the WordPress Media Library.
  • Add any text content or basic HTML content to be overlayed over the looping video.
  • Select the overlaying text’s color.
  • Select the opacity of the video.
  • Select the height of the video.
  • Position the Video Background module on your homepage with the Redux Homepage Layout Manager. So fast!
Fullscreen Video Background settings

When you decrease video opacity, an underlying background line pattern reveals itself. Decreasing video opacity and exposing the background pattern improves the visibility and readability of the overlaying text content. There is a working example of this module at the bottom of my homepage but only temporarily.

See the Pen Basic Fullscreen Video Background by Matt Gross (@mattgrosswork) on CodePen.0

Fullscreen Video Background

Redux Parallax Module

After building a parallax in a client site, I decided that my clients might want to create or edit their own parallax. A web parallax is a vertically fluid scrolling of images and text. A parallax is easier to understand than to describe, so see this example parallax. I am using the Redux framework on the backend of a WordPress site for a content provider to easily build and configure the parallax. Here were my goals to create the parallax on a Bootstrap homepage:

  • the parallax’s position on the homepage could be changed
  • the parallax could easily be activated or removed from the homepage
  • the number and order  of parallax images needed to be adjustable and re-ordered
  • the floating parallax text blocks could be easily edited
  • the parallax could have an optional title
  • the height of parallax images could be adjusted
  • the opacity of the parallax images could be adjusted
  • there could be no client coding, only WordPress content provider skills required

What made my project really work was Redux’s slides field. This field allows the user to create any number of slides which each includes: an image, a title, and a text block, so you can create a parallax with an unlimited number of slides. The slides can also be reordered by dragging each slide to your desired sort order, the top slide displays first. I also added adjustments for the background images’ height and opacity. Making adjustments to the parallax couldn’t be easier.

Adding images and text blocks within Redux parallax module

Adding images and text blocks within the Redux homepage theme options

I was surprised how little coding was required to build a parallax. Just a little HTML/PHP, a few CSS rules and no Javascript. If you would like to learn more about the Homepage Layout Manager, I have a post that introduces the Redux homepage theme option.

See the Pen Parallax by gordo019 (@gordo019) on CodePen.

See the Pen Redux config settings by gordo019 (@gordo019) on CodePen.