How to Easily Embed Videos in Joomla Articles (Step-by-Step Guide)

Published in Blog by Tassos Marinos on Tuesday, 16 August 2022

How to Easily Embed Videos in Joomla Articles (Step-by-Step Guide)

Do you want to embed videos in your Joomla articles? Showcasing video content helps you grab your visitors' attention and increases user engagement on your website.  

Beginners may find adding videos to Joomla websites challenging since there's no straightforward method to display video content in Joomla.

No worries, though! We've got you covered with our Advanced Custom Fields extension. This feature makes it super easy to embed videos from video hosting sites like YouTube, Vimeo, Facebook, DailyMotion, and other sources.

In this article, we will show how to easily embed videos in Joomla articles from different popular video sources. 

Let's get started!

TABLE OF CONTENTS

Why Should You Embed Videos in Your Joomla Articles?

Videos are one of the most useful mediums for communicating with customers. In almost all businesses, video content is proven to be the best means of informing, engaging, and persuading potential customers.

embed videos in joomla35

Integrating videos into your website benefits you in many ways, such as:

  • Videos help you attract your visitors' attention and increase user engagement on your website.
  • Search engines also prioritize the web pages in rankings that have embedded videos in them. 
  • Helps you drive traffic to your site.
  • Build trust and credibility among your site visitors.
  • Enhance users' website navigation experience.

And more.

Extend Joomla Fields With Advanced Custom Fields

You might be wondering what the Advanced Custom Fields extension is. Advanced Custom Fields is a Joomla extension that offers extra custom field types and advanced functionality for Joomla Fields.

embed videos in joomla12

It enhances the functionality of Joomla and simplifies the process of displaying content from Joomla's custom fields to the site's frontend.

Using native Joomla custom fields, you can add calendars, lists, checkboxes, and other elements to your pages. However, currently, no custom video field option is available that allows users to embed videos in Joomla articles.

The Advanced Custom Fields extension not only allows you to embed videos from popular video hosting sites but also you can add your own self-hosted videos. In addition to videos, there are many other interactive content elements you can create with the 20+ field types of ACF extension.

For instance, you can:

  1. Add a PayPal Button field in Joomla
  2. Display an interactive Google Map in Joomla
  3. Add a Progress Bar to Joomla articles
  4. Add a WhatsApp click-to-chat feature to Joomla

Now that you have understood the ACF extension and the benefits of embedding videos, now let's begin our tutorial.

How to Embed Videos in Joomla Articles

ACF is a freemium tool. And it is possible to embed videos using the free version, but with limited functionality. To unlock all the advanced features of ACF, you need to subscribe to the Pro package. 

Today, we will use the Pro version of ACF to demonstrate all the features and complete functionalities of the specific custom field.

Get and Install Advanced Custom Fields

To get started, you'll need to install the Advanced Custom Fields extension. If you're exploring the Free version of ACF, you can install it like the other free extensions of Joomla.

In case of using the Pro version, first, you'll be required to Upload the Package File and then follow the installation process you would normally do for any extension.

To verify if the extension is installed properly, go to your Home Dashboard, click on the Plugins option, and search for ACF

You should be able to see a list of Field plugins shown in the image below.

embed videos in joomla7

Great! Now we can proceed to our tutorial. 

How to Embed a YouTube Video in Joomla

To embed a YouTube video in Joomla, ACF offers a YouTube Custom Field.

The YouTube Custom Field allows you to display YouTube videos at the front end of your Joomla site by simply entering the URL or ID of the video. 

Additionally, you get plenty of customization options to modify the player's display settings according to your preference.

So now, let's see how to embed a YouTube video using the ACF YouTube field.

Step 1: Create a New YouTube Custom Field

Once you finish installing the ACF extension, go to your site's main menu and select Content > Fields.

embed videos in joomla15

This will open the Fields page. Click on the + New button to create a new field.

embed videos in joomla22

Next, you'll be redirected to the Field Dashboard. Here you'll need to select the required field type and define other related attributes.

Step 2: Add Field Title and Select ACF – YouTube Field

First, add a Title on the Field dashboard, and select ACF - YouTube for the Type section from the dropdown list.

embed videos in joomla17

Step 3: Customize Video Layout

Once you select the field type, additional customization options will appear. You can configure each option as per your website preference.

Let's see all the video customization options you'll get with ACF - YouTube field.

1. Add Name, Label & Description

These are basic options you'll find in every Joomla Custom Fields.

embed videos in joomla29

It is possible to configure fields' settings, such as Name, Label, and Description.

As well as, you can set if the field options are mandatory or not.

Once you fill in the options, proceed to the next part.

2. Define Video Size: Fixed or Responsive

Next, you'll find customization setting options for your YouTube video layout. 

You can choose the size of the embedded video to be displayed in a Fixed or Responsive layout.

If you select Video Size as Fixed, the video will be showcased in a fixed size based on the Video Width and Video Height defined by you.

embed videos in joomla11

Choosing the Responsive Video Size option will automatically adjust the video's width and height depending on the container's height and width.

The above-mentioned are the free features of ACF - YouTube field. Next, let's take a look at Pro features.

3. Autoplay & Closed Captions Feature

The first premium features you'll get with ACF are Autoplay and Closed Captions.

embed videos in joomla6

Enabling the Autoplay feature will automatically play the video as soon as the page loads.

When Closed Captioning is enabled, the text version of the video will be displayed even if the user does not want to see the text translation of the video.

4. Choose Color Theme

After that, you’ll get the option to choose between two themes: Red and White.

embed videos in joomla41

The theme color is applied to the progress bar of the video. This feature works well for those who prefer not to display YouTube's default progress bar color.

5. Toggle-On Controls & Disable Keyboard Shortcuts

embed videos in joomla16

The Controls feature shows the player's controls, such as Play, Pause, and Mute.

And by toggling on the Disable Keyboard Shortcuts feature, you will be able to disable keyboard shortcuts for YouTube videos on your web page.

6. Define Video’s Start Time & End Time

The next feature provides you the flexibility to set specific Start and End Times for Your Video.

embed videos in joomla43

Start Time: In the start time field, enter the number of seconds you want the video to start. This option is helpful if you wish to skip introductions in particular videos.

End Time: Enter the number of seconds you want the video to stop playing, counting from the end. If you want to skip the outro scene of a video with a 15-second outro scene, then you should type in the number 15.

7. Fullscreen & Video Annotations

Fullscreen and Video Annotations features will display the player's fullscreen button and video annotations, respectively.

embed videos in joomla19

8. Loop, Modest Branding & Related Videos Feature 

embed videos in joomla4

As the name implies, this feature plays your video continuously in a loop. If you wish to start the video from the beginning after it ends, enable the Loop feature.

When the Modest Branding feature is enabled, a YouTube logo appears in the player's controls. 

The Related Videos feature is useful if you have a YouTube channel or want to display more relatable video content after the video ends.

With the ACF - YouTube field, you'll get these nifty yet powerful features at your fingertips. If you use the traditional method of embedding videos by adding HTML code to page scripts, even adding these simple features takes some technical experience.

Step 4:  Add YouTube Video to Your Joomla Article

Now that we've customized all the video display settings, it's time to add the YouTube video to your Joomla article.

Open the Article where you want to display the video. 

Next, go to the Fields Tab and add the full URL or ID of the YouTube video.

embed videos in joomla37

And this is how the YouTube video will look on the front end of your Joomla site.

embed videos in joomla42

How to Display Vimeo Video in Joomla

ACF provides a Vimeo Custom Field that can be used to embed Vimeo videos in Joomla.

You can display Vimeo videos on your Joomla site's frontend by entering the video's URL or ID in the Vimeo Custom Field. 

Furthermore, you get plenty of options for customizing the players' display settings.

Now let's see how we can embed a Vimeo video using ACF Vimeo.

Step 1: Add Field Title & Select ACF - Vimeo Field 

To get started, first, you need to create a new field. 

In the main menu of your site, click Content > Fields. You will be taken to the Fields page. Create a new field by clicking on the + New button.

You will then be redirected to the Field Dashboard. First, add a Title to the Field dashboard, and in the Type section, select ACF - Vimeo from the dropdown menu.

embed videos in joomla17

Upon selecting the field type, additional customization options will appear. You can customize each option to suit your website's needs.

Step 2: Customize the Vimeo Video Layout

1. Add Name, Label & Description

embed videos in joomla25

In this section, you can define the item's Name, Label, and Description. In addition, you can choose whether these options are mandatory or not.

2. Set Video Size: Fixed or Responsive

The next step is to choose whether your Vimeo video’s size will be Fixed or Responsive.

embed videos in joomla31

Selecting the Fixed Video Size option allows you to add custom Video Width and Video Height.

Choosing Responsive Video Size will automatically adjust the video's width and height according to the container's dimensions.

3. Autoplay & Loop Feature

embed videos in joomla1

These features are self-explanatory. Your Vimeo video will start playing automatically after the page loads if you enable the Autoplay option.

And if you want to play video in a continuous loop, toggle on the Loop option.

4. Display Title, Byline & Portrait

The options are specifically added to enhance the video-watching experience and to give courtesy to the video creator.

embed videos in joomla4

With the Display Title option, you can display the video's title inside the player.

If you toggle on Display Byline, the byline will appear inside the player. Byline is the text that appears under the title and is usually the creator's username.

The Display Portrait option will display the portrait of the video creator.

5. Choose the Player's UI Color.

Last but not least, you can customize the color code of the player to suit your liking.

embed videos in joomla10

Once you are done with all the options, don't forget to click on the Save button.

Step 3: Add Vimeo Video to Your Joomla Article

Now, add the Vimeo video on the frontend of your Joomla site.

Open the Article where you want to showcase the video.

Next, go to the Fields Tab and your Vimeo video's full URL or ID.

embed videos in joomla28

This is how the Vimeo video will look on your Joomla article.

embed videos in joomla23

How to Embed a Dailymotion Video in Joomla

The ACF - Dailymotion Custom field allows you to embed a Dailymotion video in your Joomla articles  - in a few clicks.

Just add the URL or ID, and you'll be able to fetch a Dailymotion video on the frontend of your Joomla website.

Further, you get plenty of options to customize the display of your video according to your preferences.

Let's now discuss each feature in detail.

Step 1: Add Field Title & Select ACF - Dailymotion Field 

We'll start by creating a new field on your Joomla site.  

To create a new field, go to your site's main menu and click Content > Fields. This will redirect you to the Fields page. 

Create a new field by clicking on the + New button.

You will be taken to the Field Dashboard. First, add a Title and select ACF - Dailymotion from the dropdown menu in the Type section.

embed videos in joomla9

Step 2: Customize the Dailymotion Video Layout

Once you select the field type, additional customization options will appear. You can customize each option to suit your website's needs.

1. Customize Video Size, Width & Height

With the ACF - Dailymotion Field, you get options to alter the video size by adding custom video Width and Height.

embed videos in joomla26

2. Enable Autoplay, Display Control, Display Endscreen & Mute Feature

Further, you get granular controls to enhance the video display on your site's frontend.

embed videos in joomla21

You can Enable the Autoplay feature to play the video automatically as soon as the page loads.

Toggle on the Display Control button if you want to show video player controls.

Next, you get a Display Endscreen feature to show the video's end screen.

Enabling the Mute feature will automatically sound off the embedded video. Your visitors get the option to unmute the video on the frontend.

3. Select Video Quality & Enable Sharing Feature

Next, you can enhance the video display by selecting the Video Quality parameter from the available options.

embed videos in joomla44

If you want, you can also show a share-a-video button by enabling the Sharing feature.

4. Select UI Color, Display Logo & Start Screen Info & Video Theme

embed videos in joomla1

Furthermore, you get more styling options for your player. You can customize the player UI by adding the preferred color code.

If you want to display the Dailymotion logo over the video, enable the Display Logo feature.

The Start Screen Info will showcase the additional info, such as the video's title and creator's name, before the video starts.

And lastly, you can choose between a Dark or a Light theme for the player.

Step 3: Add Dailymotion Video to Your Joomla Article

Once you configure all the setting options, you can add Dailymotion videos to your Joomla site's frontend.

To do that, open the article where you want to display the video. Next, go to the Fields tab and enter the Dailymotion video's URL.

embed videos in joomla36

And this is how the Dailymotion video will look on your Joomla article.

embed videos in joomla34

How to Embed a Facebook Video in Joomla

With the ACF - Facebook Video custom field, you can fetch & display a Facebook video on the frontend of your Joomla site simply by adding the URL.

To start with the process, you need to add a new field to your Joomla site. 

First, open the main menu of your site and click Content > Fields. This will open the Fields page of your Joomla site.

Create a new field by clicking on the + New button.

You will then be taken to the Field Dashboard. Add a Title to the Field dashboard, and in the Type section, select ACF - Facebook Video from the dropdown menu.

embed videos in joomla5

You will see additional customization options after choosing the field type. Depending on your website's needs, you can customize each option.

Let’s see each option in detail.

Step 1: Add Name, Label & Description

You can add a video Name, define a Label, and add a detailed description related to the video. 

These features help you improve the video surfing experience of your site visitors.

embed videos in joomla39

Step 2: Customize Video Width & Allow Fullscreen

Next, you can select the Video Width. In addition, you can toggle the Allow Fullscreen button on and off to display videos in fullscreen mode.

embed videos in joomla38

1. Enable Autoplay, Include Post & Show Captions Feature

embed videos in joomla24

If you enable the Autoplay feature, the video will play automatically when the page loads.

If a Facebook post is associated with the video, you can include its text by enabling the Include Post feature. This feature is only available on desktop sites.

You can display captions on your Facebook video by turning on the Show Captions feature.

Step 3: Add Facebook Video to Your Joomla Article

You can now add Facebook video to your Joomla site's frontend.

Open the article where you want to display the video. Go to the Fields tab and enter the Facebook video's URL.

embed videos in joomla3

And this is how the Facebook video will look on your Joomla article.

embed videos in joomla40

How to Embed an HTML5 Video (self-hosted) to Joomla

The HTML5 Video custom field lets you display a self-hosted video at the frontend of your Joomla site by adding the URL or defining the relative path of the video file.

Generally, in order to add HTML5 videos to a website requires embedding HTML5 video tags to the page code. As this sounds, it's not a very user-friendly process.

So the best solution for adding HTML5 Videos to Joomla is ACF - HTML5 Video Custom Field.

Let's see the features of the ACF - HTML5 Video custom field in more detail.

Step 1: Add Field Title & Select ACF - HTML5 Video Field 

To get started, you need to create a new field on your Joomla site.

Go to your site’s main menu and click Content > Fields. This will redirect you to the Fields page. 

Create a new field by clicking on the + New button.

This will open the Field Dashboard. First, add a Title, and in the Type section, select ACF - HTML5 Video from the dropdown menu.

embed videos in joomla8

Step 2: Customize Video Display

Once you add the title and choose your field type, you can proceed to the customization features.

embed videos in joomla1

1. Add Name, Label & Description

Here you need to add your video Name, Label, and define a Description. These options will help your visitors to get an idea of what the video is about.

2. Customize Video Height & Width

embed videos in joomla14

Next, you can change the layout of the video player by altering the video Height and Width.

3. Enable Controls, Autoplay, Loop & Muted Features

Below mentioned features give you advanced control options for your video.

embed videos in joomla32

You can enable the Controls feature to display player controls such as the Play/Pause button.

The Autoplay feature, as the name says, if enabled, will automatically play the video as soon as the page loads.

You can further play your video in a Loop and also enable the Muted feature.

4. Choose Preload Option

By using the Preload feature, you can control how the video should load when the page loads.

embed videos in joomla13

Step 3: Add HTML5 Video to Your Joomla Article

Once you are done with the setting options, you can add the HTML5 Video to your Joomla site's frontend.

Open the article where you want to display the video. Go to the Fields tab and add the video's URL.

embed videos in joomla18

This is how the video will look in your Joomla article.

embed videos in joomla30

And that's it! This is how you can easily embed videos in Joomla articles.

Next Learn: How to Create a Photo Gallery in Joomla

I hope this article helps you embed and display videos from multiple sources in your Joomla articles.

ACF is a powerful feature that offers a plethora of options to create elements on Joomla. 

You can display a beautiful photo gallery on your Joomla website using the ACF- Gallery field. To learn more, check out our detailed article on how to create a photo gallery in Joomla.

Also, if you're looking for ways to protect your website from malicious traffic and spam, you need to go through our detailed article on how to contact form spam in Joomla.

Join over 40,000

Subscribers to get Free Joomla! tips, extension updates, and deals!