If you need to write an article with youtube videos or animated gifs embedded, you will probably noticed that on Joomla they are not responsive by default. In this tutorial I'll show you how to do that. There are two ways. The easy one, which is to install a plugin. This is the solution if you need to make a youtube video responsive and in that case I'd suggest you this plugin, which is great and free. The second way is the one you have to follow if you have other content with iframe such as animated GIF to embed in your website. In order to get all the content in iframe responsive you have to follow these steps. In this tutorial I'm using JCE editor, which I recommend (download here). I found the idea to write this article after I read this discussion in a forum.


Step 1 - Add style

Go to Components > JCE editor > Editor Profiles. By default your profile is "Default". If you changed it, click on the one you're using. Otherwise, click on Default. Then click on the tab Plugin parameters.

Step 2 - Set a new style

Click on the tab style select.

In order to create a new css class fill the form as the image below.

Step 3 - The code

In order to get the content responsive copy the following code and paste it in the notepad.

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px; height: 0;

overflow: hidden;



.video-container iframe,

.video-container object,

.video-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;



Step 4 - Upload the css

Save the file with the following name "custom.css" and upload in your template folder. This procedure can be slithly different. It depends on the specific template that you use. In the case of the template Purity iii, you have to upload it in the folder purity_iii/css in the case you are not in the development mode (so when you don't use .less files)

Step 5 - Use the style

Now you can edit your article. Highlight the iframe part which you want to make responsive and then through the editor apply the new style

Save the article and then test it. Everything should work properly!

This is the result, try it on different devices.


If I solved your problem, like and share it, thank you!