The code in this download folder enables you to add a MP4 video behind the front page 1 widget area in the Altitude Pro child theme for Genesis. No plugins required.
The code adds a video upload setting to the customizer ( as seen in the following demo video ) so you can upload or add a video to the front page one widget area in replace of the static image background. If none added, the default background image will be shown.
Demo Video
The demo shows a video added via the customizer replacing the default static background image behind the front page 1 widget area. Shows a transparent site header background changing to a dark color on scroll and when the mobile menu kicks in.
Tested using versions 1.4 and 1.5 of the Altitude Pro child theme for Genesis by StudioPress using a MP4 video file. Not tested using other video file types.
Installation Steps
- # Upload the file named front-page.php to your Altitude Pro child theme folder replacing the default front page template.
- # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your Altitude Pro themes functions file.
- # Copy & paste the CSS from the style.css file to the end of your AP themes style sheet and clear caching.
# Change Video To Image On Smaller Screens
If you’re using a lot of custom HTML/Text in a widget displayed over your video on desktops, it’s not going to fit in on mobiles because the video height scales down very small, unlike the background image.
In this case, you can use the following front-page.php file template in replace of the one included in the above download folder and add some additional CSS to the end of your Altitude Pro themes style sheet to swap out the video to a image on mobile sized screens.
# Hide Some Widget Text On Mobiles Using CSS
Another option is to use CSS with media queries to hider some of your widget content displaying over your video on smaller screens without swapping out your video with a image :
Example :
@media only screen and (max-width: 600px) {
.front-page-1 .widget p {
display: none;
}
}This CSS will hide any text/HTML you have added to the front page 1 widget area which is wrapped in p tags.
# Mobile Testing
The solution in this download folder has been tested on a live domain using my own personal Samsung Galaxy mobile phone as seen in the above video. It’s also been tested using Chrome Inspector as seen in this demo video
# Auto Playing Videos On iPhone’s
Videos may not auto-play on iPhones because of your phone settings which disable videos auto playing in order to block annoying video advertisements with loud music. You can re-enable auto playing of videos using your iPhone settings.
Was This Tutorial Helpful?