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 :
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
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.
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