Different Video For Desktop & Mobile

The code in this download folder enables you to change the front page 1 background video on mobile screens. It also includes code to add 2 video upload fields to your customizer. 1 for desktops and the other for mobiles as seen in the following screenshot and demo video.

In this example, the mobile video displays when the screen width is 800px.

Demo Video

Shows you how to use the customizer to add videos for display behind the front page 1 widget area on mobile and desktop screens using Infinity Pro.

Tested using the Infinity Pro child theme by StudioPress replacing the front page 1 widget background image with a MP4 video.

Installation Steps

There’s 3 steps :

  1. # Upload the front-page.php template to your Infinity Pro theme folder replacing your default front page file.
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your Infinity Pro theme functions file.
  4.  

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

Once you have installed the code, you can go to Customize > Front Page Video and add your MP4 videos.

Download Folder

Related Tutorials

Join 5000+ Followers

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