Video featured in Divi articles with ACF

Published on 15/09/2020 | 9 comments

I was recently asked a question : "Can we 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.

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

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

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

1 - Get the data of the YouTube video to be integrated

For the rest of this tutorial for displaying highlighted videos in your Divi posts, you'll need data from YouTube. You're probably used to it, but for complete beginners, here's how to get the URL or iFrame code of a video hosted on YouTube:

URL - iFrame Youtube
Get the URL or iFrame code of the YouTube video
  1. Go to the video you want to embed in your article. Click on 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 to achieve, you will need one or the other. Let's see it in details...

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 ACF - Advanced Custom Field. Even though WordPress natively allows you to create custom fields, they are not optimal for videos featured in your Divi posts, so that's why you need an extension.

Extension ACF - Advanced Custom Field
Install and activate the ACF extension - Advanced Custom Fields

Go to the Extensions > Addtab, 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 Click on "Featured Video".. Then set up the custom field :
  3. Field title: Video Featured.
  4. Field name: this will be written by itself. For example : video_featured.
  5. Field type: choose oEmbed from the drop-down menu.
  6. Instruction: this is optional but you can give an indication that will be visible in the administration of the article.
Valider Champ ACF
Validate the custom field
  1. In the box Locationbox, define the type of publication that will benefit from this field. For example: Articles.
  2. In the settingsbox, leave as is. However, you can display the new field "on the side. This way, the custom field will be available in the sidebar of the administration of your articles, in the same place as the image in the foreground.
  3. Validate your field by clicking on Publish.

3 - Integrate the Video field in the article template

You now have a new Featured Video 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 that explains how to create a template for your Divi articlesand then come back here afterwards.

Intégration Modèle Article
Use an ACF shortcode to display the new field.
  1. Go to the tab Divi > Theme Builder.
  2. Create or edit the Personalized Body of the template assigned to All items. You can obviously assign this template to another type of publication, it's up to you, but in this tutorial, I'll show you how to add a video highlight to blog posts.
  3. At the desired location in your model, add a Text module and enter the shortcode that contains the name of your ACF custom field. This shortcode should look like this: [acf field="video_featured"].

Finally, save your model.

4 - Place a highlighted video 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 highlighted video in each article before publishing it:

Ajout Individuel Article
Use 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 doesn't matter. It's your choice. 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. All you have to do is enter the URL of the YouTube video you want to embed in your post in this field.
  3. When you visit the article on the front side, you will see that the video has been integrated into your article!
Apparence Front Video
The end result is that the video is featured in the articles.

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

5 - Alternative: 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...

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

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

Champ ACF Autoplay
Create a new "video autoplay" field

Let's do it again like the previous tuto:

  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 write itself. For example : video_autoplay.
  5. Field type: choose Text from the drop-down menu.
  6. Instruction: this is optional but you can give an indication that will be visible in the administration of the article.
  7. In the box Locationbox, define the type of publication that will benefit from this field. For example: Articles.
  8. In the settingsbox, leave as is. However, you can display the new field "on the side. This way, the custom field will be available in the sidebar of the administration of your articles, in the same place as the image in the foreground.
  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 simply integrate it into your article template created with the Divi Theme Builder :

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

Save your model.

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

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 doesn't matter.
  2. In the sidebar of the article's administration, you will see your new custom field named Video Autoplay. All you have to do is paste the iFrame code of the YouTube video you want to embed in your article.
  3. Please note that for autoplay to work, you must add a parameter to the iFrame URL. Add: ?autoplay=1 at the end of the URL and before the closing quotes. That's it, the YouTube video launches when the page loads. Note that some browsers block the launch of automatic videos.

6 - Improve the design of the model

Now that everything is working, you can improve the design of your article 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 styled with a bevel divider. All about Divi dividers here.
  3. The video is displayed using the ACF shortcode placed in a Text module, as explained above.
  4. Do not forget to place a Publish content module which displays the content of your article, created with Gutenberg or Divi.

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

There you go, in just a few clicks you have 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 amazing things! Feel free to browse the official documentation to go much further than just inserting a highlighted video into your Divi posts!!!

Here is a short 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:

9 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

  3. Kamel

    Bonjour et merci pour ce super tuto !
    Petite question : y a t-il selon vous une possibilité d’émettre une condition : pour les articles où le champ Youtube serait vide, afficher l’image à la une ?
    Merci d’avance,

  4. Lycia Diaz

    Salut Kamel. Avec du PHP ce serait possible mais nativement dans Divi, on ne peut que le faire de manière ponctuelle depuis le Thème Builder. Je ne sais pas comment le faire en automatique. Un dev saurait peut-être…

  5. Greg

    Merci !!!

  6. Cusco creativos

    Gracias!!!!!!!!! estuve buscando buen tiempo este tutorial!

  7. Lycia Diaz

    Gracias Cusco !

  8. John

    Salut de Canada!

    I have spent hours trying to figure out how to get an ACF field with iframe html code as a value rendered in divi with the dynamic field filling and enabling « allow raw html code ». Turns out the shortcode [acf field= »name »] was the answer I was looking for.

    Even if your blog post wasn’t on « how to embed an iframe with divi and acf » it solved my issue perfectly.

    Thank you soooo much!

  9. Lycia Diaz

    Hello John from Canada 😉 Great !!!

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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