How to Add Dynamic Video in Elementor with ACF

Updated: January 23, 2021

The ability to create custom templates and add custom fields makes it possible for you to create any type of website using Elementor. Say you want to create a movie review website and plan to add a trailer video — which you take from YouTube — for every single review you write. In this case, you ideally create a custom post type and then create a custom template for it. You can use CPT UI (Custom Post Type UI) to create a custom post type, while to add custom fields to the custom post type you created you can use ACF (Advanced Custom Fields). With the help of ACF, you can add dynamic video to a custom template you create with Elementor.

Step 1: Create the custom fields

First, you need to create a custom field group with ACF. When creating a field group, make sure to add a field with the field type of URL.

You can assign the custom field group to a default post type (blog post) or a custom post type as mentioned above. For more detailed instructions on how to create custom fields in ACF, you can refer to this page.

Once done creating the custom fields, create a new post where the custom field group is assigned to. Paste the URL of the video you want to add to the video URL field.

Publish the post once you are done filling out all fields.

Step 2: Create a custom template

Next, you can create a custom template for the custom post type (or default post type, depending on where you want to add the dynamic video). In this example, we will create a custom template for a custom post type. Go to Templates -> Theme Builder and click the Single Post tab. Click Add New to create a new custom template.

Give your template a name and click the CREATE TEMPLATE button to start creating the template.

On the Elementor editor, add the Video widget to the canvas area.

Go to the settings panel on the left side. Click the dynamic icon on the Link field under the Video block. Select ACF URL Field.

On the ACF URL Field, click the wrench icon and select a key (custom field) according to the video URL field you created with ACF on the step 1 above.

That’s it.

You can click the Image Overlay block on the settings panel to add a custom overlay to the video. You can also use a dynamic overlay if you want it. To do so, first, you can add a custom field with the field type of Image. Then, click the dynamic icon on the image picker and select ACF Image Field and then tailor the key according to the field name you set for the image overlay.

You can publish your template you are done editing it.

PS

If you experience an issue when working with custom fields in Elementor (e.g. custom fields don’t show up), you can refer to this post to fix it.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!