How to Embed YouTube Videos in Joomla

Stergos Zamagias
Stergos Zamagias
Published in Tutorials
Nov 4 2024
11 min read
Last updated nov 5 2024
How to Embed YouTube Videos in Joomla

Are you looking for an easy way to embed YouTube videos or shorts on your Joomla website? Many site owners struggle with this task, but it doesn't have to be complicated. In this guide, we'll explore multiple ways to embed YouTube videos to your Joomla site, helping you choose the approach that best suits your needs. Whether you're a beginner or an experienced Joomla user, you'll discover a straightforward method to enhance your content with YouTube videos. Follow along to learn how to integrate YouTube videos into your Joomla site and engage your visitors with dynamic video content.

Why you should add a YouTube video on your Joomla site

Adding YouTube videos to your Joomla website can offer several benefits:

  • Increase Website Speed: Hosting your videos on YouTube ensures fast loading times, high-quality playback, and a better overall user experience compared to hosting them locally.
  • Explain your product or service: Use YouTube videos to visually demonstrate your product or service, making it easier for potential customers to understand its benefits.
  • Build credibility: YouTube videos can help establish your website as an authority in your industry by showcasing your expertise and knowledge.
  • Drive more traffic: YouTube videos can attract more visitors to your website by appearing in YouTube search results and being shared on social media.
  • Improve SEO: YouTube videos can help your website rank higher in search engine results pages (SERPs) by increasing your website's dwell time and improving user experience.
  • Enhance your content: YouTube videos can add a visual element to your content, making it more engaging and interesting for your audience.

How to add a YouTube video without an extension

Adding a YouTube video to your Joomla site can be done quickly and easily without needing an extension. If you'd rather avoid adding extra extensions for simple tasks like embedding a video, you can use YouTube's embed code directly. This method keeps things straightforward.

Here's how it works:

Step 1: Get the YouTube Video Embed Code

  1. Go to YouTube and find the video you want to embed.
  2. Below the video, click the Share button.
  3. In the pop-up window, click on Embed.
  4. You'll see an iframe code. Click on “Copy” to copy the code to your clipboard.

Step 2: Add the Embed Code to Your Joomla Article

  1. Embedding a YouTube video in the default Joomla editor (TinyMCE) requires a change in the editor's settings. Go to System > Manage > Plugins > Search for “TinyMCE” > find the “Sandbox Iframes” toggle, disable it and click on “Save & Close”.
  2. Go to Components > Articles. Create a new article or edit an existing one.
  3. Click on the “Insert/Edit Media” toolbar button.
  4. On the modal that appears, click on “Embed”, paste the code you copied previously into the textarea and finally click on “Save”.
  5. The Joomla editor should now display the YouTube video.

Drawbacks of not using an extension

Adding a YouTube video without an extension might seem quick at first, but it comes with several significant drawbacks.

The process becomes time-consuming when you need to add videos to multiple pages, as you'll need to manually embed each video. Additionally, you may encounter issues with Joomla's default editor stripping out your video embed code, requiring constant fixes and reformatting.

You'll also find yourself limited in terms of customization and control - managing player controls and related videos becomes challenging. Perhaps most importantly, performance takes a hit since you'll be missing out on crucial optimizations like lazy loading, and the default YouTube embed code loads several external scripts that can slow down your page loading times

How to add a YouTube video in Joomla With a Module

We've shown how to embed a YouTube video directly into your content without using a Joomla! extension. However, if you need more customization options and ease of use, embedding YouTube videos through a Joomla module is the recommended method.

Before getting started, you need to install a reliable extension on your Joomla site that allows you to embed videos. When it comes to embedding video on your Joomla site, Smile Pack is one of the best Joomla extensions to do the job. It's a collection of premium modules, including the Gallery Module, Map Module, PayPal Module, and, of course, a Video Module. Smile Pack's Video Module allows you to quickly add videos that are customizable, support a plethora of providers, and load super-fast, giving you flexibility and control over how videos appear on your site.

Install Smile Pack

The very first step is to download Smile Pack. Follow the steps listed below:

  • Log into your Joomla dashboard
  • Go to System > Install > Extensions > Click on “Install from Web” > search for “Smile Pack” > Click on “Smile Pack” > Click on “Install”
  • On the confirmation screen, click “Install” again to install Smile Pack on your Joomla site.

Step 1: Create a Smile Pack - Video Module

In this section, we'll provide a detailed guide on how to add a YouTube video to your Joomla website using the Smile Pack - Video Module. By following these steps, you'll be able to easily embed YouTube videos on your site and enhance your content.

Go to Content > Site Modules and click on New.

Search for “Smile Pack - Video” in the module list and select it.

Step 2: Enter title, and select "YouTube" video source

In the Video Module settings, type a title, locate the Video Source field, and select “YouTube”.

Then, paste the URL of the YouTube video you want to embed into the YouTube URL field.

Step 3: Select Module Position and Publish

In the module settings > Position, select the desired module position where you want the video to appear on your Joomla website.

Change the status to Published and click on “Save”.

How to use module shortcode to embed a YouTube video on any article

Joomla has a built-in feature that lets you embed any module into an article using a simple shortcode. This is a handy way to add YouTube videos to your content if the video is already set up in a module.

Here's how to embed a Smile Pack - Video module into any Joomla article:

Step 1: Edit a Joomla article, click on the “CMS Content” button in the editor and then click on “Module”

Step 2: Select the Smile Pack - Video module and it will automatically add a shortcode into your Joomla article

The video module is now embedded in your article.

You can now click on “Save” and the video will appear within the article on your site.

How to add a YouTube video in Joomla site using Custom Fields

Are you using Joomla custom fields to enhance your Joomla articles experience on your website? If so, you'll be happy to know that you can also embed YouTube videos using custom fields!

With Advanced Custom Fields, a powerful plugin for creating custom fields in Joomla, you can easily add a Video field to your Joomla articles. This allows you to embed YouTube videos directly within your Joomla articles, configure your videos as you see fit, integrate with YooTheme Dynamic Content, giving you more flexibility and control over how videos are displayed on your website.

Install Advanced Custom Fields

The very first step is to download Advanced Custom Fields. Follow the steps listed below:

  • Log into your Joomla dashboard
  • Go to System > Install > Extensions > Click on “Install from Web” > search for “Advanced Custom Fields” > Click on “Advanced Custom Fields” > Click on “Install”
  • On the confirmation screen, click “Install” again to install Advanced Custom Fields on your Joomla site.

Create a YouTube Video custom field

Once you've installed Advanced Custom Fields, it's time to create a YouTube video custom field in order to embed YouTube videos within your Joomla articles.

To embed YouTube videos within your Joomla articles, we've prepared a detailed tutorial which you can find on our documentation.

How to display a YouTube video in a Popup in Joomla

Are you using popups on your Joomla website? If not, you're missing out on a powerful way to engage your visitors. Popups are perfect for highlighting important content, and they're especially effective when it comes to video content. Whether you want to showcase product demonstrations, tutorial videos, or promotional content, video popups keep your visitors focused and engaged while maintaining the context of your main page.

The best tool for displaying video popups in Joomla is EngageBox. This powerful popup builder makes it incredibly easy to create video popups that work across all your devices.

Install EngageBox

The very first step is to download EngageBox. Follow the steps listed below:

  • Log into your Joomla dashboard
  • Go to System > Install > Extensions > Click on “Install from Web” > search for “EngageBox” > Click on “EngageBox” > Click on “Install” >
  • On the confirmation screen, click “Install” again to install EngageBox on your Joomla site.

Create a YouTube Video Module

The easiest way to display a video inside EngageBox is by using a module. Create a YouTube Video Module with Smile Pack, following the steps outlined in the earlier section, “How to add a YouTube video in Joomla With a Module.”

Create a Video Popup

Once the Video Module has been created, it's time to create a Joomla video popup using the EngageBox Joomla extension.

Go to Components > EngageBox > Click on “New”.

Click on “Blank Popup”.

Click on “CMS Content” > “Module” to select the YouTube video module to embed in your popup.

Search for the video module you just created and select it.

Your Video module is now embedded into your video popup.

Click on “Save” to publish the popup.

Customizing the Embedded Youtube Video

If you used Smile Pack or Advanced Custom Fields extension to embed your video, both these extensions share advanced customization options to fine-tune your videos. Here are some of the key settings you can adjust to enhance the viewing experience for your Joomla website visitors:

  • Enhanced Privacy Mode: This GDPR-compliant setting helps protect user privacy by preventing cookies from being stored on your website until the video is played. This is particularly useful for YouTube videos, as it reduces cookie usage by loading the video from a privacy-focused domain.
  • Cover Image: Choose how the video appears before it's played. You can opt for no cover image, use the auto-generated cover from YouTube, or upload a custom cover image that reflects your content. A well-chosen cover image can grab viewers' attention and entice them to click play.
  • Autoplay: Decide whether the video should start playing automatically when the page loads. This can be immersive, but be mindful of modern browser restrictions.
  • Autopause: Select if the video should pause when it scrolls out of the visitor's view. This helps conserve bandwidth, especially on mobile devices.

Beyond the YouTube video provider

While YouTube is the most popular video platform, there are several other excellent options for hosting and sharing your videos. Here are the rest of supported video providers:

  • Vimeo is widely known for hosting professional and artistic content, with a focus on high-quality creative work.
  • Dailymotion offers another robust platform for sharing video content, popular among content creators worldwide.
  • Facebook videos allow you to tap into the massive social media audience and easily share content across the platform.
  • Self-Hosted videos for maximum control and flexibility, allowing you to manage every aspect of video delivery and presentation.

Conclusion

By following the steps outlined in this guide, you have successfully learned how to embed YouTube videos on your Joomla website. You now have multiple powerful options at your disposal:

  • Smile Pack - Video Module for quick and easy video integration anywhere on your site
  • Advanced Custom Fields - Video Field for organizing and displaying videos within your Joomla articles
  • EngageBox for creating attention-grabbing video popups that enhance user engagement

Each solution offers unique advantages: Smile Pack provides straightforward module-based integration, ACF gives you structured content management through custom fields, and EngageBox adds dynamic popup capabilities to capture your visitors' attention.

With these tools, you now have the knowledge and skills to enhance your content, engage your audience, and drive more traffic to your site by incorporating YouTube videos.

The Μodules Suite for Joomla - Map, Video, Gallery, PayPal Button and more.
The modules suite for Joomla to reduce extension clutter
Today, it's a module collection. Tomorrow, it will evolve beyond that. Smile Pack plans to be your single extension content powerhouse.