How to Easily Embed Videos in Joomla Articles

Do you want to embed videos in your Joomla articles? Showcasing video content can help you grab your visitors' attention and increase 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! Our Advanced Custom Fields extension has you covered. This feature makes it super easy to embed videos from video hosting sites like YouTube, Vimeo, Facebook, DailyMotion, and others.

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

Let's get started!

TABLE OF CONTENTS

• Why Should You Embed Videos in Your Joomla Articles?
• Extend Joomla Fields With Advanced Custom Fields
• How to Embed Videos in Joomla Articles
• How to Embed a YouTube Video in Joomla
• How to Display Vimeo Video in Joomla
• How to Embed a Dailymotion Video in Joomla
• How to Embed a Facebook Video in Joomla
• How to Embed an HTML5 Video (self-hosted) to Joomla
• Next Learn: How to Create a Photo Gallery in Joomla

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 the best means of informing, engaging, and persuading potential customers.

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

• Videos help you attract visitors' attention and increase user engagement on your website.
• Search engines also prioritize the web pages in rankings with embedded videos. 
• It 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 about the Advanced Custom Fields extension. It is a Joomla extension that offers extra custom field types and advanced functionality for Joomla Fields.

It enhances Joomla's functionality and simplifies the process of displaying content from Joomla's custom fields on the site's front end.

Using native Joomla custom fields, you can add calendars, lists, checkboxes, and other elements to your pages. However, no custom video field option is currently 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 you can also add your self-hosted videos. In addition to videos, you can create many other interactive content elements 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 let's begin our tutorial.

How to Embed Videos in Joomla Articles

ACF is a freemium tool. The free version allows you to embed videos, but it has 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

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

If you're using the Pro version, you'll first need 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 the Plugins option, and search for ACF. 

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

Great! Now, we can proceed to our tutorial. 

How to Embed a YouTube Video in Joomla

ACF offers a YouTube Custom Field to embed a YouTube video in Joomla.

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

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.

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

Next, you'll be redirected to the Field Dashboard. Here, you must 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 from the Type section dropdown list.

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 with ACF - YouTube field.

1. Add Name, Label & Description

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

Configuring fields' settings, such as Name, Label, and Description, is possible.

You can also 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 Height you define.

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

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 with ACF are Autoplay and Closed Captions.

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.

4. Choose Color Theme

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

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

5. Toggle-On Controls & Disable Keyboard Shortcuts

The Controls feature shows players' controls, such as Play, Pause, and Mute.

You can disable keyboard shortcuts for YouTube videos on your web page by toggling on the Disable Keyboard Shortcuts feature.

6. Define Video’s Start Time & End Time

The next feature allows you to set specific Start and End Times for Your Video.

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're going 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.

8. Loop, Modest Branding & Related Videos Feature 

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 content after the video ends.

With the ACF—YouTube field, you'll have these nifty yet powerful features at your fingertips. If you use the traditional method of embedding videos by adding HTML code to page scripts, 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.

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

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 front end by entering the video's URL or ID in the Vimeo Custom Field. 

Furthermore, you get many 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.

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

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.

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

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

3. Autoplay & Loop Feature

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

If you want to play a 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 give the video creator courtesy.

You can display the video's title inside the player with the Display Title option.

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.

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 front end 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.

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

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 can fetch a Dailymotion video on the front end 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.

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 can alter the video size by adding custom video Width and Height.

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

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

Enable the Autoplay feature to play the video automatically after 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 silence the embedded video. Your visitors will have the option to unmute the video on the front end.

3. Select Video Quality & Enable Sharing Feature

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

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

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

Enable the Display Logo feature if you want to display the Dailymotion logo over the video.

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 front end.

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.

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

How to Embed a Facebook Video in Joomla

With the ACF—Facebook Video custom field, you can fetch and display a Facebook video on the front end of your Joomla site simply by adding the URL.

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

First, open your site's main menu 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 dashboard, and in the Type section, select ACF—Facebook Video from the dropdown menu.

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

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.

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.

1. Enable Autoplay, Include Post & Show Captions Feature

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 videos to your Joomla site's front end.

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

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

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

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

Generally, adding 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 

You need to create a new field on your Joomla site to get started.

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.

Step 2: Customize Video Display

You can proceed to the customization features once you add the title and choose your field type.

1. Add Name, Label & Description

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

2. Customize Video Height & Width

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

3. Enable Controls, Autoplay, Loop & Muted Features

The features mentioned below give you advanced control options for your video.

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

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

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

4. Choose Preload Option

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

Step 3: Add HTML5 Video to Your Joomla Article

Once you have completed the setting options, you can add the HTML5 Video to your Joomla site's front end.

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

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

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 many options for creating elements on Joomla. 

Using the ACF- Gallery field, you can display a beautiful photo gallery on your Joomla website. 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.