Altitude Pro Responsive MP4 Video Background For Front Page 1 Widget Area

The code in this tutorial enables you to add a fully mobile responsive WordPress hosted MP4 video background to the front page 1 widget area in the Altitude Pro child theme by StudioPress.

Here’s the demo showing the full screen video tested at different screen widths using Chrome, Firefox & Safari browsers.

Mobile Responsiveness

The widget text wrapped in h2 tags and call to action buttons display on all mobile devices regardless of screen width. However, i have removed the widget title and small disclaimer from hand held’s as seen in the demo video above and screenshot below.

Front Page 1 Widget Setup

I used exactly the same widget content as the StudioPress theme setup recommends as seen in the following image:

Uses this HTML

Here’s the full solution for logged in members:

Related Tutorials for Different Versions

• How To Replace Front Page 1 Image With Video In Altitude Pro 1.4 & 1.5