Video highlighted in Divi articles with ACF

Published on 15/09/2020 | 2 comments

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

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

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

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Getting the YouTube video data to be integrated

For the rest of this tutorial to display videos highlighted in your Divi articles, you will need data from YouTube. You're probably used to it, but for those of you who are just starting out, here's how to retrieve the URL or iFrame code of a video hosted on YouTube :

URL - iFrame Youtube
Retrieve the URL or iFrame code of the YouTube video
  1. Go to the video you want to include in your article. Click on the Share.
  2. The link of the video appears, just copy it.
  3. An alternative exists: click on Integrate to copy the iFrame code from the video.

Depending on the purpose you wish to achieve, you will need one or the other. Let's look at this in detail...

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

2 - Creating custom fields with ACF

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

Extension ACF - Advanced Custom Field
Installing and activating the ACF - Advanced Custom Fields extension

Go to the tab Extensions > AddTo do this, install and activate the ACF plugin. Attention, there are several versions, be sure to install the one of Elliot Condon installed on more than 1 million sites.

Next, you will create your first custom field:

Créer Champ ACF
Create a custom "video featured" field
  1. Go to the tab ACF > Add.
  2. Enter a title, for example "Featured Video". Then configure the custom field :
  3. Field title: Video Featured.
  4. Field name: this will register itself. For example, the field name is : video_featured.
  5. Field type: choose oEmbed in the drop-down menu.
  6. Instruction: this is optional but you can give an indication that will be visible in the administration of the item.
Valider Champ ACF
Validate the custom field
  1. In the box LocationIf you are using the "Publish" field, define the type of publication that will benefit from this field. For example: Articles.
  2. In the settingsleave it as it is. However, you can display the new field "on the side". Thus, the custom field will be available in the sidebar of the administration of your items, at the same place as the highlighted image.
  3. Validate your field by clicking on Publish.

3 - Integrate the Video field in the article template

You are now in possession of a new Video Featured field, you must now display it in your articles so that it is visible to 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 posts. This way, you only have to do the work once.

If you don't know how to do this, I invite you to follow the tutorial which explains how to create a template for your Divi itemsand then come back here afterwards.

Intégration Modèle Article
Use an ACF short code to display the new field.
  1. Go to the tab Divi > Theme Builder.
  2. Create or edit the Custom Body of the model assigned to All articles. You can obviously assign this template to another type of publication, it's up to you, but in this tutorial, I show you how to add a video highlighting in 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 custom ACF field. This short code should look like this [acf field= "video_featured "].

Finally, register your model.

4 - Place a video highlighted in each article

That's it, the custom field is created and integrated into your articles. From now on, you will be able to fill in a video highlighted in each article before publishing it :

Ajout Individuel Article
Using the YouTube URL to display the video in articles
  1. Add a new article. You can use the Divi Builder or the default layout (Gutenberg). It does not matter. It's up to you. For my part, you should know that I only use Gutenberg (the WordPress editor) to write my articles. I use the Divi Builder only on my pages.
  2. In the sidebar of the article administration, you will see your new custom field named Video Featured. Simply enter the URL of the YouTube video you want to include in your article in this field.
  3. When you visit the article on the front side, you can see that the video has been integrated into your article!
Apparence Front Video
Final result: the video is highlighted in articles.

Don't delay any longer! Discover the Divi theme here !

5 - Alternatively: display a YouTube video in "autoplay".

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

But I see you coming and I'm sure you were going to ask me as a comment how to do the same thing with a YouTube video that automatically launches when the page loads. Am I wrong?

So here is the solution if you want to integrate a autoplay video :

Champ ACF Autoplay
Create a new "video autoplay" field

Let's start again 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 will register itself. For example, the field name is : video_autoplay.
  5. Field type: choose Text in the drop-down menu.
  6. Instruction: this is optional but you can give an indication that will be visible in the administration of the item.
  7. In the box LocationIf you are using the "Publish" field, define the type of publication that will benefit from this field. For example: Articles.
  8. In the settingsleave it as it is. However, you can display the new field "on the side". Thus, the custom field will be available in the sidebar of the administration of your items, at the same place as the highlighted image.
  9. Validate your field by clicking on Publish.
Validation Champ Autoplay
Validate the creation of the custom field.

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

Intégration Champ Video Autoplay
Integrate the custom field in the article template.
  1. Go to the tab Divi > Theme Builder.
  2. Create or edit the Custom Body of the model assigned to All articles. You can obviously assign this template to another type of publication, it's up to you, but in this tutorial, I show you how to add a video highlighting in blog posts.
  3. At the desired place in your template, add a Text module and enter the short code that contains the name of your custom ACF field. This short code should look like this : [acf field= "video_autoplay "].

Register your model.

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

Ajout Video Autoplay Article
Use the iFrame of YouTube videos to display them in each article.
  1. Add a new article. You can use the Divi Builder or the default layout (Gutenberg). It does not matter.
  2. In the sidebar of the article administration, you will see your new custom field named Video Autoplay. All you have to do is paste the iFrame code from the YouTube video into your article.
  3. Warning, for the autoplay to work, you must add a parameter in the URL of the iFrame code. Add: ?autoplay=1 at the end of the URL and before the closing quotes. That's it, the YouTube video starts loading when the page loads. Note, however, that some browsers block automatic video launch.

6 - Improve the design of the model

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

Video Featured Resultat Final
Final visual rendering

Some explanations:

Explications Layout Modele
Use the Theme Builder options to improve the design of the template.
  1. In the article template created with the Theme builder, I added a module Job 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 ACF shortcode placed in a Text module, as explained above.
  4. Do not forget to place a Publish Content module which allows you to display the content of your article, which was created with Gutenberg or Divi.

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

That's it, in just a few clicks you've created custom fields in your WordPress site and displayed them in your Divi posts!

ACF is a very powerful extension that allows you to do incredible things! Feel free to browse the official documentation to go much further than just inserting a highlighted video in your Divi articles!!

Here's a little reading list that may help you:

Video Mise En Avant Youtube
Youtube Acf Divi
Featured Video Divi blog post

1,588 words

6

You should like it too:

2 Commentaires

  1. MYRIAM KASSEM

    Bonjour,
    J’ai acheté votre support « Divi : le WorkBook 2020 » et il est très bien mais j’ai néanmoins quelques difficulté, notamment pour créer un lien, modifier l’aspect de certains modules… Jusqu’ici je n’ai fait quelques sites en HTML/CSS et pendant le confinement une formation WordPress. Je trouve ça compliqué mais il faut vraiment que je m’y mette et je me demandai si vous faite des formations individuels ?
    Merci pour votre retour,
    Bien à vous,

  2. Lycia Diaz

    Salut Myriam,
    Ton commentaire date un peu (j’avais oublié de l’approuver) et entre temps, nous avons fait connaissance en visio. J’espère que ton site avance bien !
    A bientôt
    Lycia

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This