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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: