WP SITES

Log in

Infinity Pro Front Page 1 Autoplay Video Loop Background

—

by

Brad Dalton

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 :

  1. # Upload the front-page.php file replacing the default front page template.

    2.  

  2. # 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.

    3.  

  3. # Copy and paste the CSS code from the style.css file to the end of your style sheet and clear caching.

    4.  

Download Folder

Related Tutorials

Comments

8 responses to “Infinity Pro Front Page 1 Autoplay Video Loop Background”

  1. Jaime Chanaga Avatar
    Jaime Chanaga

    Any way to play video unmuted?

    1. Brad Dalton Avatar
      Brad Dalton

      Easily done Jaime. Remove the muted attribute from the HTML output in the PHP code

      From this :

      [code]

      To this :

      [code]

  2. Christine Booth Avatar
    Christine Booth

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Christine Booth Avatar
        Christine Booth

        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.

        1. Brad Dalton Avatar
          Brad Dalton

          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/

  3. Ian Forest-Jones Avatar
    Ian Forest-Jones

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Which theme version are you using?

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.