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