How to Embed Flash (SWF), HTML or Javascript into a Joomla Content Article or Module

by Sean on July 15, 2009

After scouring the internet for a while, I found that these few problems are pretty common and there is no real source that stands out to answer these questions; Not even Joomla Forums. So, I have set out to show you visually and in writing how to embed flash (swf) files, html, javascript or pretty much any code [php, asp] whatever, into a Joomla 1.5 Article or a Joomla 1.5 Module. So, hope everyone finds this helpful. Please feel free to check out all our other SEO/Tips Blog posts as well.

Joomla Article:

Flash – SWF Files

1.) First things first, you want to go into Joomla Administrator Panel (I am going to assume you know how to do this if you are at the point where you want to embed anything)

2.) Upload the SWF file to the “/images/” directory or any directory you choose, just remember the path (example: http://www.mysite.com/images/myfile.swf)

SWF File Directory Path

3.) Locate the article you would like to embed the flash in.

Locate the Joomla Article

4.) Next you will see a little “add media button”. Click that and then select the type of file, mostly likely SWF/Flash.  Fill in the details (use the path you have from step one). All dimensions will be different depending on the size of your doc, if your not sure, leave it blank and Joomla will automatically make it the comp size.

place the swf/flash into the article- embed

5.) Save the article (or hit apply if you have more work to do on the article). You are all done now.

save the joomla article

Joomla Article:

HTML/Javascript/PHP/ASP (Code in general)

This process is the same as above with the exception of these first steps.

1.) After you log in to Joomla 1.5, go to User Manager.

user manager for joomla 1.5

2.) Create a new user and name him, “noeditorjoe” or whatever else you would like will suffice. :-) . Fill in the new details and then choose “No Editor” for his default editing device. MAKE SURE YOU MAKE HIM A SUPER ADMINISTRATOR. Then hit SAVE and move on to the next step.

three steps to create a new joomla 1.5 super admin user with no editor

3.) Now logout of Joomla and log back in with your “noeditorguy”user and go into the article where you want to embed the HTML and you will notice there is no WYSIWIG editor. Insert your HTML in the proper section and bada bing. Save it and all done.

save the embeded HTML code

Website Consultants are available 365 days a year to give you a free preliminary search marketing consultation. Call us today at 239.738.6320 or 518-488-4524contact the best seo company in florida

Joomla 1.5 Modules

OK, All the steps above are necessary after you create the module, so this section will show you how to create a Custom HTML Joomla 1.5 module and then you can refer to the above process for embedding.

1.) Go to Extensions>Module Manager>Create New Module

new custom joomla module

2.) Select Custom HTML Module and then save it. The editor is at the bottom of the module once you create it. Edit it the same way you would with a Joomla 1.5 Article.

select custom html module and then save it

3.)Embed whatever is necessary (see above directions) and Save it

And this concludes the tutorial. If you have any problems, use the contact form to get a hold of someone from Website Consultants. We are always happy to help.

Thanks everyone!

{ 38 comments… read them below or add one }

Rex Reeve September 22, 2009 at 11:12 pm

I want to ask about joomla flash Module, I’m one of the Administrator in our joomla society in iResorts.org. is it possible that i can put flash in our site? even without permission of Super Administrator? because i want to put a flash button to an Article that i add. I’m a newly designer in joomla.

rawah September 26, 2009 at 10:12 am

hey there. thanks for your detailed explanation on embedding flash in joomla. i did everything the way u explained. how ever, the flash file does not load on my web page. it says “loadfail”..could you give any ideas on how to rectify the problem??

sean October 1, 2009 at 12:16 pm

Yes you can. Most people don’t put the direct path to the file, so try that and see if it works. If it doesn’t, just let me know and I will try to help.

sean October 1, 2009 at 12:17 pm

Loadfail will happen if the XML path of the flash object is wrong. Try to make sure that it is correct and see if that works.

Rex Reeve October 2, 2009 at 5:19 am

Bro I don’t have Media Button, that’s my problem.. what i gonna do?

Ed October 12, 2009 at 12:23 am

My Joomla editor doesn’t seem to have as many icons as shown in your screenshot. Is that a version that’s available for download? fyi … I’m using tinymce.

Thanks for your help.

Goos October 12, 2009 at 3:16 am

I followed the steps. Thx for these. But I’m getting no flash inserted, just a yellowish rectangle with a button-like f in the middle of it. No flash if I publish the article.

Thx for replying
Goos

san October 12, 2009 at 11:21 pm

Loadfail will happen if the XML path of the flash object is wrong…

1) where can i check which is the correct path of xml
2) Flash is not appering
3) i am using tinymce edcitor — extented mode
4) flash test.swf file is stored in images\stories this is the path present in global config file.
5) why the flash is not appearing? pls ?

Rex Reeve Rabacal October 18, 2009 at 3:54 am

i followed the instruction above.. but when i preview my swf file.. there’s nothing appear..

Wally Warwick October 19, 2009 at 6:45 am

I am trying to embed a flash movie that is driven by a XML file. The movie is actually a carousel menu.
I have tried the Flash Module in the Joomla Extensions but this does not support the external XML. There have been some postings related to this that seem to say that therre is an easy fix to this and although I am a programmer, I am only beginning to learn about PHP.
I have also tried using a custom module and calling the swf as an object but with the same result. I see the background that is directly in the swf file but the icons that are called by the xml are not there.
Having read yourr posting regarding the embedding of swf files, I thought that you may know if it is in fact a fairly simple fix to allow my fhash movie to see the xml.
Thanks in advance for any help you may be able to offer.

Wally Warwick October 19, 2009 at 10:43 am

Sorry to bother you. I have just discovered in a somewhat unrelated posting that I needed to include the absolute patth for the XML file in my flash in order for it to work.
Thanks.

sean October 22, 2009 at 12:48 pm

I don’t think I understand…if you are doing something like my map on http://www.rehab-programs.org, that is driven with a XML file, you just have to make sure your flash file calls it correctly.

sean October 22, 2009 at 12:50 pm

Make sure the path is correct or send me the URL so I can take a look.

sean October 22, 2009 at 12:53 pm

It won’t show if you don’t call it correctly…send me the url of your issue.

sean October 22, 2009 at 12:54 pm

Did you turn off code clean up? Go into tiny mce options and then turn off code clean up.

sean October 22, 2009 at 12:54 pm

No, you must go into your plug in options and then click on Tiny MCE and put it into extended mode.

sean October 22, 2009 at 12:57 pm

Go to your plgu in options and click Tiny MCE, then turn it on to extended mode.

Rex Reeve October 22, 2009 at 9:12 pm

people up there just download the “All videos” from joomla.org and just install, enable it in the plugin manager! then try to insert your SWF file and put this code above {swf}yourFileName{/swf} i tell u!! 8′s working!
Note: Don’t include the .swf type of your object just the name.

Anyways.. thanks for Mr. Sean for telling how to extended my TinyMCE…. hehe.

sean October 28, 2009 at 12:50 pm

@Rex, No problem! Thanks for the idea about all videos. I will check it out.

Paul April 29, 2010 at 9:48 pm

Sean, I believe you should have started your whole post with saying WHICH EDITOR you are using to embed the media files.

Sean April 30, 2010 at 8:49 am

Hey Paul, it actually says TinyMCE several times throughout the tutorial.

Paul April 30, 2010 at 11:25 pm

Sean, the tutorial does NOT mention “TinyMCE”. The name only comes up in someone’s comment. If you read the comments, you’ll see how people are confused of not seeing the menu and functions you are referring to. All I’m saying is that it’d help if you named the tool in the tutorial itself.

Sean May 1, 2010 at 9:57 am

Well, thank God we have you, Paul. Now everyone knows :-)

Glad I could help you solve your problem.

aiai June 10, 2010 at 12:05 am

I have successfully activated my Tiny-MCE editor..but my problem still exist..I still cannot find the other icons (esp. the flash uploader) . PLease help me..I’m stuck on this.

Sean June 10, 2010 at 6:54 am

Go to extensions>plugin manager>select TinyMCE and then change the options to extended and hit save.

Kevin June 25, 2010 at 7:51 pm

Hi Sean,

Love the map at http://www.rehab-programs.org. I know this is a Flash file. How did you set it up Is each “USA state” a symbol with a getURL function? Did you use absolute links in the getURL? Or is there a better way. I would like to try to do a map like that. Thanks for sharing the knowledge.

Sean June 26, 2010 at 8:49 am

It gets the URL from an XML file.

BUBU June 29, 2010 at 11:27 pm

Hey Sean,
I am having a hellofatime trying to imbed the following code on a Joomla 1.5 article page. It’s a Flash Gallery from http://www.flashnifties.com/flash_gallery.php
The sample HTML is as follows:

FlashNifties Auto Flash Gallery

Oops!
It looks like you don’t have flash player 6 installed. Click here to go to Adobe download page.

var so = new SWFObject(“flashGallery.swf”, “gallery”, “100%”, “100%”, “6″, “#FFFFFF”);
so.addVariable(“setupfile”, “setup.xml”); //location of setup file.
so.addVariable(“scriptpath”, “flashGallery.php”); // location of gallery script
so.addVariable(“gallerydir”, “images”); // images folder for the gallery to scan
so.write(“flashcontent”);

What do I need to paste in the article? Any help direction would be appreciated.
Thanks

Sean June 30, 2010 at 8:09 am

I’m not quite sure, I don’t see any object/embed tags. Are you sure you have the correct syntax?

Sean June 30, 2010 at 8:11 am

whoops, clicked submit too soon- you can also try:

-using absolute URL’s.
-turning off your editor
-using the flash/media button within TinyMCE

Becca August 9, 2010 at 2:57 pm

I am using TinyMCE and edited it to extended mode, but still don’t have that button. Do you have any ideas of how I can get that button to show up?

Sean August 9, 2010 at 2:59 pm

If you have it on extended it should be there. Please verify you have the correct settings and followed the instructions correctly. If you are still having problems just reply to this comment.

Thomas Tang August 11, 2010 at 4:31 am

Hi Sean,

Thanks for sharing this info! Does this work with Quicktime movies and FLVs?

Best Regards

Tom

KShy August 16, 2010 at 8:03 pm

Nice tutorial.

For those who had issues with tinyMCE editor. Just open it in under plugins and change the settings to extended and save it . You will see the media icon.

Sean August 17, 2010 at 8:58 am

Yes, quicktime would be a little different I think…

Brendan December 21, 2010 at 3:42 am

Hi I’m trying to embed a You Tube video into Joomla. In the preview it works using code or just the URL, but when I press apply or save it disappears, along with any other embedded videos on the page. Any ideas on how to fix this? I have tried several PCs and Firefox and IE.Thanks

ahmad June 6, 2011 at 12:42 am

Nice info
You are my hero..
I solved my joomla problem..

daniella November 17, 2011 at 7:00 am

Thnx!!! it works perfectly

Leave a Comment

Previous post:

Next post: