• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Monochrome Pro MP 4 Video Behind Front Page 1 Widget

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

video-behind-site-header

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 :

Register or login to access the download folder :

Register for full access

Related Tutorials

  • Replace Genesis Block Background Image With Video On Monochrome Pro Front Page
  • Replace The Image With Video Block & Cover Text In Monochrome Pro

Monochrome Pro Video

Reader Interactions

Comments

  1. Peter Olima says

    December 23, 2020 at 10:20 am

    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
    • Brad Dalton says

      December 23, 2020 at 10:49 am

      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
      • Peter Olima says

        December 23, 2020 at 11:13 am

        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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.