Video highlighted in Divi articles with ACF

A question was asked recently: "Can we add a featured video instead of an image in the Divi articles?". Good news, the answer is YES and this article explains how to do it.

To do this, you will need to use an extension named ACF (Advanced Custm Field) in association with the Divi Builder Theme.

This solution is ideal if you are YouTuber and want to highlight your videos on your blog. Moreover, there is a YouTube channel Tips Divi. Have you ever visited her?

1 - Get data from YouTube video to integrate

For the continuation of this tutorial to display videos highlighted in your Divi articles, you will need data from YouTube. You are certainly used to it but for the great beginners, here is how recover the iFrame URL or code of a video hosted on YouTube:

1. See you on the video you want to integrate into your article. Click Share.
2. The link of the video appears, just copy it.
3. An alternative exists: click on Integrate to copy the iFrame code of the video.

Depending on the purpose you want, you will need one or the other. Let's see in detail...

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 - Create custom fields with ACF

To continue, you will need to install the extension ACF - Advanced Custom Field. Although WordPress natively allows to create custom fields, these are not optimal for videos highlighted in your Divi articlesSo that's why you need an extension.

Go to the tab Extensions > Add, install and activate the ACF plugin. Be careful, there are several versions, make sure to install the of Elliot Condon installed on more than 1 million sites.

Then you will create your first custom field:

1. Go to the tab ACF > Add.
2. Enter a title, for example "Video Featured". Then configure the custom field:
3. Field Title: Video Featured.
4. Field name: This one will register on his own. For example: video_featured.
5. Type of field: choose oEmbed in the drop-down menu.
6. Instruction: This is optional but you can give an indication that will be visible in the article administration.

7. In the box Location, define the type of publication that will benefit from this field. For example: Articles.
8. In the box settingsLeave it as it is. However, you can view the new field "on the side". Thus, the custom field will be available in the sidebar of the administration of your items, in the same place as the image highlighted.
9. Validate your field by clicking on Publish.

3 - Integrate the Video field into the article template

You are now in possession of a new field Video Featured, you must now post it in your articles so that it is visible to the Internet users.

For this, nothing better than using the Theme Builder which will allow you to create a template that will apply to all your blog articles. So you do the job once.

If you don't know how to do this, I invite you to follow the tutorial that explains how to create a template for your Divi articlesThen come back here next.

1. Go to the tab Divi > Theme Builder.
2. Create or edit it Personalized body model assigned to All articles. You can obviously assign this model to another type of publication, it is you who see, but in this tutorial, I show you how add a highlight video to blog posts.
3. At the desired location in your model, add a Text module and enter the short code that contains the name of your ACF custom field. This short code should look like this: [acf field="video featured"].

Finally, register your model.

4 - Place a featured video in each article

Here, the custom field is created and integrated into your articles. From now on, you will be able to inform a video featured in each article before publishing it:

1. Add a new item. You can use the Divi Builder or the default layout (Gutenberg). This has no impact. It's up to you. For my part, know that I only use Gutenberg (the WordPress editor) to write my articles. I only use the Divi Builder on my pages.
2. In the sidebar of the article administration, you will see your new custom field named Video Featured. All you have to do is seize, in this field, the URL of YouTube video to be included in your article.
3. When you visit the front-side article, you see that the video has been integrated into your article!

Don't delay! Discover the theme Divi here !

5 - Alternative: display a YouTube video in "autoplay"

The previous solution allows you to integrate a YouTube video into your articles that the user can launch if he wishes...

But I see you coming and I'm sure you're going to ask me in comment how to do the same with a YouTube video that starts automatically loading the page. Am I wrong?

So here's the solution if you want to integrate a video in autoplay :

We start over like the previous tutorial:

1. Go to the tab ACF > Add.
2. Enter a title, for example "Video Autoplay". Then configure the custom field:
3. Field Title: Video Autoplay.
4. Field name: This one will register on his own. For example: video_autoplay.
5. Type of field: choose Text in the drop-down menu.
6. Instruction: This is optional but you can give an indication that will be visible in the article administration.
7. In the box Location, define the type of publication that will benefit from this field. For example: Articles.
8. In the box settingsLeave it as it is. However, you can view the new field "on the side". Thus, the custom field will be available in the sidebar of the administration of your items, in the same place as the image highlighted.
9. Validate your field by clicking on Publish.

As before, once your custom field is created, you just need to integrate it into your article template created with the Divi Theme Builder :

1. Go to the tab Divi > Theme Builder.
2. Create or edit it Personalized body model assigned to All articles. You can obviously assign this model to another type of publication, it is you who see, but in this tutorial, I show you how add a highlight video to blog posts.
3. At the desired location in your template, add a Text module and enter the short code that contains the name of your ACF custom field. This short code should look like this: [acf field="video autoplay"].

Record your model.

Then each time you create a new article, you can use the field Video Autoplay to integrate a YouTube video. However, there is a small difference with autoplay, you need iFrame code :

1. Add a new item. You can use the Divi Builder or the default layout (Gutenberg). This has no impact.
2. In the sidebar of the article administration, you will see your new custom field named Video Autoplay. Then just stick iFrame code of YouTube video to be included in your article.
3. Be careful, for the autoplay to work, you must add a parameter in the iFrame code URL. Add: ?autoplay=1 at the end of the URL and before closing quotes. Here, the YouTube video starts loading the page. Note, however, that some browsers block the launch of automatic videos.

6 - Improve model design

Now that everything works, you can improve the design of your article template. For example, here is the final rendering for my example:

Some explanations:

1. In the article template created with the Theme builder, I added a Module Position title in the upper section.
2. I then added another section that I stylized with a bevel separator. All about Divi separators Here.
3. The video is displayed thanks to the shortcode ACF placed in a Text module, as explained above.
4. Do not forget to place a Publish Content module which allows to display the content of your article, which was created with Gutenberg or Divi.

7 - Video highlighted in the articles: in conclusion...

Here, in a few clicks you created custom fields in your WordPress site and you posted them in your Divi articles!

ACF is a very powerful extension that allows you to do amazing things! Do not hesitate to browse the official documentation to go much further than to insert only one video highlighted in your Divi articles !!!

Here is a little playlist that can help you:

• Official Documentation ACF
• Create custom WordPress fields
• How to create custom fields with WordPress
• How to create a dynamic portfolio model with Divi and ACF