Call or Text @ (800) 504-1075‬

Embedding Video with Divi Builder and ACF

by Michael Love | < 2 minutes | Jun 9, 2020 | Divi, Learning, PHP, WordPress

Skill Level: Intermediate
PHP, Divi Builder, Wordpress Themes, ACF

The Scenario

One of the nice things about Divi and its Theme Builder is that we can create custom layouts that will automatically apply to a specific post type, group of posts or just about anything.  This is especially useful because it enables us to focus on content especially when writing new blog posts.  Rather than have to work with the Divi Builder when publishing a new post, we can rely on the work we did when making customizations in the Theme Builder.  Simply add the new post content and let Divi do the rest.

I recently read about a challenge a Divi user was facing when trying to build a nice layout that included space for an embedded video.  There’s not really a way to do this in a way that puts the embedded video in a place determined by the Theme Builder layout but it can be done with a combination of the Theme Builder, Advanced Custom Fields Plugin and a very small snippet of code.

Advanced Custom Fields

Advanced Custom Fields (ACF) is a popular and very powerful custom fields manager for WordPress.  Best of all, Divi ships with support to include custom field data into builder modules making the combination of the two a very powerful tool.  Unfortunately, these combinations do not work well when trying to use them together to embed videos.  But, there is a fairly simple method.

First, install the ACF plugin.  Once installed, follow the documentation to create a new field group with am “oEmbed” type field named “embed_code”.   Associate this new field group with the post, page or other location where you want to be able to embed videos with the method described here.

The Divi Layout

In your Divi layout, format your video area the way you want it to appear then add the shortcode “[embedcode]” the the contents of the module.  To minimize unnecessary output, the code module is best for this part of the task.  Apply borders, spacing etc to achieve the style you want.

The Shortcode

Finally, you will need to activate that shortcode so that it grabs then embeds the video during page load.  To do this, add the following code to your child theme functions.php:

function embed_code($atts = [], $content = null, $tag = '')
{
return get_field('embed_code');
}
add_shortcode('embedcode', 'embed_code');

This is super simple and the way ACF works is if there is no data then it will do nothing.  Keep in mind though, if you add a lot of formatting to your cideo area then do not add a video, it will look out of sorts.

Creating New Posts

After these steps have been completed, you should now have an embed field when creating a new post.  Simply paste the URL to the video into this field and when your post is viewed the embedded video should display.

Like so…

Loading results...

Get Your No Obligation Strategic Talk

To get scheduled, call (800) 504-1075 or use the buttons below.

Why choose us to build your website?

Z

Experience

Two Decades of Website Design and Development.

SOHO

Home offices means no huge overhead costs.

Local

Located in Columbus and always up for coffee.

Imagination

Coming up with intuitive ideas is fun and exciting!

Still not sure?

That's okay and understandable.  We are here to help you and make sure you have the information to make great decisions.  Contact us with any questions, and we will get in touch.