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?
- 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 proven to be 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 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.
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:
- Add a PayPal Button field in Joomla
- Display an interactive Google Map in Joomla
- Add a Progress Bar to Joomla articles
- 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.
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.
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'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.
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.
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.
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.
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.
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
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.
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.
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 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.
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 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.
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 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. 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.
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.
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.
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'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.
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.
2. Enable Autoplay, Display Control, Display Endscreen & Mute Feature
Further, you get granular controls to enhance the video display on your site's frontend.
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.
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, 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.
And this is how the Dailymotion video will look on your Joomla article.
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.
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.
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
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.
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 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.
Step 2: Customize Video Display
Once you add the title and choose your field type, you can proceed to the customization features.
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
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.
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.
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.
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 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.
