How To Embed YouTube In Joomla

If you’re trying to embed YouTube videos into Joomla without any success, check out the video below.

The most common reason why your Joomla website will not allow you to embed YouTube videos is because your text editor is stripping out iframes.

In the video above I show how to prevent tiny MCE from deleting iframes.

After you perform the changes, you should be able to embed iframes right into your Joomla articles.

I personally prefer putting YouTube videos inside a custom HTML module, to prevent those who don’t really understand coding breaking the embed code.

It also allows you to pull the YouTube video into multiple articles without duplicating the entire embed code, using the loadposition short code.

To use the loadposition short code in your Joomla article, do as below (changing “joomla-favicon-video” to your module position name):

{loadposition joomla-favicon-video}

I also promised in the video to share the responsive CSS code that will make your Joomla video embeds work perfectly on mobiles. See below for code:

CSS To Make YouTube Videos Responsive

.responsive-video {
    display: block;
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
    max-width: 100%;
    box-sizing: border-box;
}
.responsive-video iframe {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

I hope you found this tutorial helpful and thank you for reading.

Need a Pro to Help Your Joomla Website?

If you are in need of expert Joomla support, contact our team today. We are the UK’s top Joomla web designers and have over 10 years experience working in the platform. Call 01206 864441 now for a free quote.

Share On Social Media