• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Infinity Pro Front Page 1 Autoplay Video Loop Background

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.  

  3. # 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.
  4.  

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

Download Folder

Related Tutorials

  • Different Video For Desktop & Mobile

Customizer Infinity Pro Theme Video

Reader Interactions

Comments

  1. Jaime Chanaga says

    November 16, 2022 at 3:21 pm

    Any way to play video unmuted?

    Log in to Reply
    • Brad Dalton says

      November 16, 2022 at 3:35 pm

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

      From this :

      <video autoplay loop playsinline muted>

      To this :

      <video autoplay loop playsinline>
      Log in to Reply
  2. Christine Booth says

    December 31, 2021 at 4:25 am

    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

    Log in to Reply
    • Brad Dalton says

      December 31, 2021 at 5:25 am

      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.

      Log in to Reply
      • Christine Booth says

        December 31, 2021 at 6:29 am

        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.

        Log in to Reply
        • Brad Dalton says

          December 31, 2021 at 6:34 am

          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/

          Log in to Reply
  3. Ian Forest-Jones says

    October 2, 2021 at 7:09 am

    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

    Log in to Reply
    • Brad Dalton says

      October 2, 2021 at 7:10 am

      Which theme version are you using?

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.