12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Mar 27, 2020

Video Background in Oxygen using ACF

Sridhar Katakam

This members-only tutorial provides the steps to make a mp4 video coming from a custom field appear like a background (muted, auto playing and looping) of a Section in Oxygen.

We shall add a Cover Image image-type field and Video URL Url-type field in a group, fill these on the Page and use a Code Block to position the video absolutely inside and relative to a Section.

Step 1

Install and activate Advanced Custom Fields (free or Pro).

Create the field group.

Here's the export file from my test site. This can be imported at Custom Fields > Tools.

Step 2

Upload your cover image and mp4 to the Media Library.

Edit your Page and populate the fields.

Step 3

Edit the Page with Oxygen.

a) Add a Section.

If you want the content of the Section like Heading, Text, CTA button or anything else to be centered horizontally, set Horizontal Item Alignment to Center.

Increase the top and bottom padding if necessary to say, 200px each.

Advanced > Layout > Position: Relative.

b) Add a Code Block inside the Section.

PHP & HTML:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right