Monochrome Pro MP 4 Video Behind Front Page 1 Widget

Nov 2, 2018

—

This tutorial enables you to add a MP4 video behind the front page 1 widget area in the Monochrome Pro child theme by StudioPress.

There’s 2 CSS options included :

Option 1 : Display the video behind the front page 1 widget area after the header
Option 2 : Display the MP 4 video behind the front page 1 widget area and also behind the site header and site header elements on desktops only as seen in the following demo video.

Demo Video #

Shows the MP 4 video displaying behind the front page 1 widget area and site header on desktops and after the site header on mobiles ate screen widths under 1023px.

Tested using the Monochrome Pro child theme by StudioPress with MP 4 video file hosted in the WordPress Media Library.

Code Installation #

There’s 2 steps relating to usage of the code inside the download folder :

Comments

3 responses to “Monochrome Pro MP 4 Video Behind Front Page 1 Widget”

Peter Olima

December 23, 2020

Hello,

At present (possibly because of an update) there doesn’t appear to be a front page widget for the monochrome pro theme so I was unable to reproduce what was shown above.

Do you have any suggestions on how to add a video to a full width container, and for the video to appear in full width?

Thanks,
Peter

Log in to Reply
1. Brad Dalton
  
  December 23, 2020
  
  Hello Peter. This tutorial works with versions that include a front page template. If using a newer version which uses Gutenberg blocks, try the video block or Genesis blocks.
  
  Log in to Reply
  1. Peter Olima
    
    December 23, 2020
    
    Hello Brad,
    
    Thanks for the quick response.
    
    I’m using Genesis blocks and can see now that the ‘cover’ block does allow for a video to stretch to the full width of a page.
    
    All the best,
    Peter
    
    Log in to Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.