Walker News

How To Embed FLV Flash In WordPress or HTML

Copyright © Walker 11 Jan 2008 03:56
You could embed FLV flash video in HTML by referring to the template of code below.
For example, you only have to replace the red colour text with the URL of your own FLV video. The blue colour text refers to JW Media Player that “play” the FLV video file – replace it with the URL pointing to yours (if you’ve one), otherwise leave it as this.
The sample HTML code used to embed FLV video
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="480" height="360"><param name="flashvars" value="file=http://www.walkernews.net/wp-content/uploads/2008/01/LionLove.flv&image=http://www.walkernews.net/wp-content/uploads/2008/01/Lion-Hug-Rescuer.JPG" /><param name="movie" value="http://www.walkernews.net/mediaplayer.swf" /><embed src="http://www.walkernews.net/mediaplayer.swf" width="480" height="360" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.walkernews.net/wp-content/uploads/2008/01/LionLove.flv&image=http://www.walkernews.net/wp-content/uploads/2008/01/Lion-Hug-Rescuer.JPG" /></object>

How to embed FLV video in WordPress or New Blogger?

After replacing the text in red colour text and blue colour (optional) at the above, copy and paste it to the blog post editor while you compose an article with your own flash video!

If you copy the code directly to your post, you’ll see this video playing:-

Update:

1) Upload the mediaplayer.swf file to your blog directory, i.e. the directory where the wp-config.php is kept, if you don’t know what is this “blog directory” I am referring to. How to upload it? Well, how do you upload the WordPress core files (e.g. wp-config.php)?

2) Login to your blog and write/compose a new post. Suppose you’re going to show off a flash video in this “new post”, click the Add Media button to upload it. The Add Media button is one of the upload/insert buttons which you normally click Add An Image button to insert pictures into the blog post.

3) After upload completes, look for the Link URL text box. Below it, there is 3 buttons, click the File URL button to have WordPress fill up the Link URL text box. Copy whatever inside the Link URL text box to replace all the red-color text in the sample code above.

4) Optionally, upload a screenshot of the flash video and replace the yellow-color text with the Link URL of uploaded image. If you don’t want to use this feature, delete all the yellow-color text, please.

5) Lastly, replace the blue-color text in sample code with your blog domain.

Suppose you have done the steps correctly, your self-hosted flash video shows be showing off to the world now, as this one showing here that using the sample code above:

Do not copy the sample code and paste it directly to your post without replace the colourized-text. It won’t work in that way, because I disable the hotlinking to prevent you and most other people from using my hosting bandwidth :-)


(This FLV video is copied from YouTube – refer to How to retrieve YouTube Video from the cache folder in IE and Firefox?)



More reference on this topic:

Embedding Flash Video into a Web Page
Macromedia Flash OBJECT and EMBED tag syntax
Flash Satay: Embedding Flash While Supporting Standards
Flash in HTML



Custom Search

  1. Nik April 14th, 2008 7:44 AM

    Could you please specify how to add an image to this embedded player (snapshot for video).
    In a similar script it was done with the line

    s1.addVariable(“image”,”FILELOCATION.jpg”);

    how would that be in this case?

    Thanks!

  2. Walker April 14th, 2008 11:24 AM

    Hi Nik, you may use JW Media Player (refer to the post) where the Javascript will able to do that for your case.

    (The code template that I’ve outlined is HTML style and thus less features).

    Please refer to my correction on the next comment.

  3. Walker April 14th, 2008 12:31 PM

    Hi Nik, sorry for misleading info, I might be too tired :-(

    By using JW Media Player, you could also include the snapshot / preview image of the FLV video clip by simply including the ‘image’ flashvar to that HTML-style of code (i.e. without having to use a Javascript), i.e.

    ......param name="flashvars" value="file=http://walkernewsdownload.googlepages.com/Lion-hug-Rescuer.flv&image=http://walkernewsdownload.googlepages.com/WalkerNews-Feed.jpg"......
  4. bachhoakhai May 12th, 2008 9:46 PM

    Hi Nik, it run. But…how i can make it to show a playlist of these file I’ve linked

  5. John May 16th, 2008 3:00 PM

    How could I get this to autoplay?

  6. John Morris June 27th, 2008 12:49 AM

    Walker:

    Very helpful thread. Now that I can access the FLVs via HTTP and the Object embed, how can I create a “wrapper” SWF player in which to play the files? I want to create a “branded” player. (Obviously, I don’t know much about Flash).

    Thanks – John

  7. Walker June 27th, 2008 1:05 AM

    Hi John, do you mean to create flash player of yourself?
    To be frank, I know only little about creating flash movie. So, I can’t help you on this.

  8. John Morris June 27th, 2008 1:48 AM

    I want to generalize the code as much as possible which I can probably do by creating a .js file of the enbed object code and pass the name of the target FLV file in as a parameter. I want to use a single code base to access a library of FLV files. The “player” (the single_video_player.swf) file is what I was really referring to. I want to create a new one with some additional controls and branding. Since I’m not a Flash expert by any means, I wondered if you had advice on creating the SWF player.

    Thanks – John

  9. How To Extract Audio Music From A Video Clip In Windows Movie Maker – Walker News June 30th, 2008 10:35 PM

    [...] short flash video showing a simple trick on how to do [...]

  10. How To Edit And Rewrite Post Slug / Permalink In WordPress 2.5? – Walker News June 30th, 2008 11:51 PM

    [...] just upgraded or is running WordPress powered blog for the first time, do you know that WordPress allows author to edit or rewrite the post slug to a search engine friendly [...]

  11. World Time Clock: How Many Time Zones Are Used In USA Or Russia? – Walker News July 14th, 2008 2:38 AM

    [...] too hard for you to visualize the world clock on the world map, you may refer to this simple Shockwave Flash gadget provided by [...]

  12. QueenEve July 21st, 2008 4:28 PM

    hi walker
    How can i change the skin , i want to add a different skin that has more buttons is there a way to do it
    Thanks

  13. WordPress 2.6: What Does The Commenter IP Tells? – Walker News August 18th, 2008 12:04 AM

    [...] those who are using WordPress powered weblog, do you click the commenter IP address each time before approving it? If you never [...]

  14. paul September 17th, 2008 10:43 AM

    hi there, i have 1 problem in the code at the top, when i copy and paste the code, the video didn’t play..i already change the URL of the video, but nothings happen.. this is my example “URL:http://localhost/request/DK.flv” please someone here to help me, this is for my thesis..

  15. Walker September 17th, 2008 9:53 PM

    Hi Paul,

    do you have a copy of JW Media Player (i.e. the mediaplayer.swf) in your local web server?

    If you do, you should also replace the URL of mediaplayer.swf (written in light-blue text) to test all in local web server.

    If you doubt the local web server working, just place the the URL you’re using in web browser Address bar (I think the working web server will prompt you to download).

  16. Chris November 28th, 2008 2:38 AM

    Is there any way to get the player to autoplay?

  17. How Easy To Change WordPress 2.7 Post Permalink With Post Slug – Walker News December 16th, 2008 12:53 AM

    [...] / truncation logic). If you have a reason to change the default “Pretty Permalink”, WordPress allows you to edit or change the permalink, just as you [...]

  18. Vince January 28th, 2009 10:43 AM

    Thanx for the code. I saw this code a while back but I never needed it until today. I’m starting a new site and the wordpress theme I am using only excepts this one without showing code on home page. All I need to do now is figure out how to get the full screen access turned on. Thanx again.

  19. Darius February 25th, 2009 2:36 PM

    Copied and pasted the code and it worked fine except that it doesn’t allow full screen. How do I enable full screen viewing?

  20. Walker February 26th, 2009 12:45 AM

    Try set the allowfullscreen to true (my sample code above doesn’t include this), e.g.

    ......param name="flashvars" value="file=http://walkernewsdownload.googlepages.com/Lion-hug-Rescuer.flv&allowfullscreen=true"......
  21. Tracy February 28th, 2009 11:25 AM

    I’m trying to add a flash player to my site. I’m self-taught, so i tend to intermingle different types of code. i’ve tried a few different versions of code for players, yours included, and I have the same problem every time, – I can’t hear any audio. Is there a common mistake I’m making that you can think of?

  22. Walker February 28th, 2009 11:42 AM

    HI Tracy, have you tried to browse the page embedded with flash on different PC or different browser?

  23. Tracy February 28th, 2009 2:12 PM

    yes, I’m on a Mac, so initially I thought that was the problem, and had my friends go to the link too. No audio in any browser…

  24. manwith March 1st, 2009 4:16 AM

    Hi ,

    I am trying to add this code in php file and I am not able to

    Can anyone help me out with it

  25. Gneteel March 19th, 2009 5:15 PM

    Hello,

    i’ve been racking my brain over embedding my own videos with my own flash player. my question is how do i make a video URL such as youtube, and how can i make a video id such as youtube?

    can anyone help? I appreciate it.

  26. mike April 17th, 2009 3:19 AM

    thanks man …helped alot…got it working…replaced the player on my server….all is well…much respect!!

  27. Walker April 18th, 2009 3:35 PM

    Thanks JW Media Player!

  28. How To Embed SWF File Or Shockwave Flash Object In Microsoft Word 2007? April 24th, 2009 1:29 AM

    [...] 01:29 How do you open SWF file or Shockwave Flash game? Well, if you able to watch YouTube or any flash video embedded on a web page, most likely you could open the SWF file with that web browser. But, people seldom receive SWF [...]

  29. Paul April 30th, 2009 9:01 PM

    Thanks to your guidelines I have included a “flv’ video file to the site – after much heartache I will admit – the main problems encountered on the way was getting a suitable swf file. It works fine in safari and firefox on mac osx and ie but firefox on windows has a problem ??? I am still looking at this (the site is under development obviously if you look).

    What I really want to know is the params or flashvars to turn off the controller – I have tried “name = controller value=false” but it does not seem to have any affect. If you have a list of params that apply to your swf it would be appreciated.

    All in all it is great and simple – thanks again.

    Paul

  30. Anis uddin Ahmad June 4th, 2009 2:30 AM

    Thanks man.
    Thanks for the straight-cut solution. :)

  31. Ziah J June 15th, 2009 10:20 AM

    Hey thanks much for the tutorial. I’m having troubles though and want to know if you can help me out. What if I want to host the video in the same directory as my blog but then embed it on the blog itself? I’ve tried using your code and it just shows the code in the preview….no video. So let me see if I can make what I’m trying to do a bit more clear. I’ve uploaded the video to the same public_html directory and just want to post it live on my blog. What would be the correct way to go about doing this? Thanks in advance.

  32. Walker June 16th, 2009 4:32 AM

    Please take note that the block of code in the post is referring to files hosted at Google Pages, which imposes quota of bandwidth per month. I.e. it won’t work if the bandwidth limit is hit.

    For your case, you should host the mediaplayer.swf file too instead of using mine copy at Google Pages. Note, you need to update the path to video and mediaplayer.swf accordingly.

  33. Sridhaarr June 19th, 2009 12:03 AM

    Hi ,
    I am using above code to dynamically add flash to my page by appending object tag to div.But I need to save this into database.While iam using div.innerhtml iam not getting
    flash vars value.I am getting like this
    “”
    How can i get this value.Any help appreiciated?

  34. dee June 27th, 2009 2:58 AM

    Helppp!

    I created a banner in Flash and saved it as a swf. How can I upload it ( the new banner) into wordpress to replace the old one?

    Thanks

  35. Walker June 28th, 2009 7:36 PM

    I have just updated this post today:

    1) The block of code is now using my own hosting server instead of Google Pages.

    2) The revised steps.

  36. How To Embed SWF In HTML Code Or WordPress Post? July 18th, 2009 1:32 AM

    [...] Flash game in the HTML page or blog post, here is a template of code for reference. Unlike embedding Flash Video file (FLV) in HTML code, the template code used to embed SWF file is relatively “easier” and [...]

  37. brendan July 27th, 2009 12:42 AM

    I’m going crazy here.. I put a FLV in a SWF and made a Mojave External style for it or whatever, then i went under publish and published the swf and the html and everything, and uploaded the entire folder to my website and nothing is showing up..

    What am I doing wrong, here?

  38. sophia November 13th, 2009 9:38 AM

    Hi..thanks for this article..i’ve been trying so many times and it cannot work..
    but becoz of your article, now it works…

    <3 gbu

  39. Nilesh November 17th, 2009 9:05 PM

    Hello,

    Can i change play button? if, its possible so please let me know how to chagne it.

    Thanks,
    Nilesh

  40. Jason November 20th, 2009 5:06 AM

    THANK YOU THANK YOU THANK YOU…

    I am new to blogging, etc, and have been pulling my hair out trying to figure out how to make FLV play on my wordpress blog. Your post was the first thing I found that walked me through step by step – I especially appreciate you telling me in what folder to upload the player.sfw, which was my biggest source of frustration.

    Many Blessing!!

  41. ash January 10th, 2010 1:46 AM

    Hi there,

    This was just what I was looking for. Thanks for sharing.

  42. Ed February 15th, 2010 1:44 AM

    Is it possible to download and install a free mediaplayer.swf to my server? Where do I find one?
    Thank you.

  43. Walker February 15th, 2010 8:16 PM

    You could download a copy of mediaplayer.swf from Jeroenwijering website.

  44. 4lb3rt February 28th, 2010 9:48 PM

    Another simple way to add flash content to wordpress pages and posts is to embed it into a HTML page and then recall it with an iframe. The iframe src code can be easily added as HTML into the wordpress text editor and it can be customized with all kind of formats …..size, borders, transparency.

  45. Aijaz March 6th, 2010 4:40 AM

    By following your nice tutorial I added the video.swf to my project. It is working on local I mean in Frontpage. But after uploading to my website there is nothing appearing.

    Another question : Is mediaplayer.swf is free to use for comm. and pers. website.

    thanks a lot for make this nice tutorial;

  46. Walker March 6th, 2010 1:24 PM

    Please refer to JW Media Player developer regarding the license issue.

  47. Katie April 21st, 2010 11:05 AM

    Hi there,

    I am still having trouble trying to put a WMV file on my webpage and have it play on the site. I’ve tried some of your codes, but for some reason are having difficulty.

    Please help!

    Katie

  48. Matt July 13th, 2010 3:38 AM

    Thanks, this is exactly what I needed. The quick setup wizard they provide was not working correctly for me. Copying and pasting your code worked perfectly.

    Thanks,

    Matt