This tutorial extends this older tutorial which enables you to add a MP4 video, via the Customize > Front Page Video setting and display it behind the front page 1 widget on Infinity Pro.
Tested using Mac on Chrome, Firefox & Safari, this video mutes the sounds and autoplays in a continuous loop on page load.
Demo Video
Shows the MP4 video added via the customizer replacing the front page 1 widget background image.
Tested using the Infinity pro child theme for Genesis by StudioPress.
Installation Steps
There’s 3 steps :
- # Upload the front-page.php file replacing the default front page template.
- # Copy & paste the PHP code from the functions.php file ( without the opening PHP tag ) to the end of your Infinity Pro themes functions file.
- # Copy and paste the CSS code from the style.css file to the end of your style sheet and clear caching.
Any way to play video unmuted?
Easily done Jaime. Remove the muted attribute from the HTML output in the PHP code
From this :
To this :
Hi!
I would like to load a different aspect ratio and smaller video file to show on mobile screens. Are you able to show me how to do this?
Thankyou
Christine
https://tindragontrailcottages.com.au
You can change the aspect ratio using iMovie for Mac or use a online tool https://www.adobe.com/express/feature/video/resize
Otherwise, you can order a custom tutorial and i’ll write the code for you. Cost is $75.
I have resized my video and changed the aspect ratio. I just don’t know how to add the screen-size condition to the php file. Unfortunately I can’t afford the USD $75 – so I guess I will have to continue tinkering…
Thanks anyway!
Hope you have a terrific 2022.
It’s not an easy job and may take several hours work. Also note, your membership has expired. Here’s the code for paid members https://wpsites.net/genesis-tutorials/different-video-for-desktop-mobile/
I’m not having much luck with this video background. Do you have any ideas as to what I might be doing wrong? The website in question is http://accessbis.com.au
Which theme version are you using?