ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

Easily Add Videos to Your WordPress Blogs

Last Updated on by

With the online video industry taking off, you may want to know some easy ways to add video to your WordPress sites. There are several great WordPress plugins for adding video content to your blogs. In this guide I’ll go over:

  • Adding your own hosted .flv videos to WordPress
  • How to embed videos from video sites such as YouTube

Start adding videos to your WordPress sites today and read on…

Playing hosted flash videos

If you can create your own .flv videos, and would rather not host them on a third-party site, there’s no better plugin than FLV Embed. With this plugin you can add your video to a post or page with a quick tag. First you need to get the plugin from WordPress.org at install it through OneClick or manually.

Once installed and activated, you’ll be able to configure the settings of the FLV player when it’s displayed on your blog.

FLV Embed Options

In addition to setting options such as colors, you can also have your own logo embedded, have “Full Screen Mode” enabled, set the default volume, among other features you’d expect to see from a fully featured video plugin.

To display a video in a page or a post, you’d use a quick tag similar to the following:
[flv:your-video.flv optional-portrait.jpg 425 355]

The first option, currently your-video.flv, is obviously the name of the video in the path you set on the options page. You can also set it as a full URL. The optional-portrait.jpg is optional, and is what will show up as a “preview” before the video is played. The 2 numbers are width and height, respectively.

Embedding videos from other sites

Several popular video sites such as YouTube, Google Video, MetaCafe, IFILM, and others offer “embedding” code that will allow you to place a hosted video up for display on your own site, without sacrificing your own bandwidth resources. For WordPress, there is an easy plugin that you can use to embed videos in a similar “quick tag” format as above. It’s called Viper’s Video Quicktags.

Currently this plugin supports the following video sites:

  • YouTube
  • Google Video
  • IFILM
  • MetaCafe
  • MySpace

These among other hosted video formats as well. You can get the plugin at WordPress.org. Once activated, you’ll see the options for the video sites on your post menu, which will prompt you for the video URL. It will generate the code in quick tag format to be displayed in your post.

Vipers Quicktags in Action

As you can see, it’s a very simple format. All you need is the YouTube video URL. It’s a similar format for the other supported video sites as well.

Conclusion

If you post videos frequently on your blog I’d highly recommend these plugins, especially Viper’s for the quick tag post integration for all those video sites.

Feel free to comment and share if you liked this WordPress video guide. Subscribe to the feed for more Theme Lab updates.

About

Leland Fiegel was the original founder of ThemeLab. He is a web developer who loves WordPress and blogging.

  • http://www.robinmalau.com Robin

    Hi Leland, Viper Video plugin is cool and it can be useful to put un-embedable videos, but:

    1. Ever since i upgrade to WP 2.5 (and 2.5.1 lately), the plugin noted to be updated, but everytime i try to update and re activate it, the plugin gets error. Now i let it not up to date (which considerably dangerous?).
    2. The video not showing in feed but links to original video.

    My favorite is always to run on html mode and embed the video codes. However, in WP 2.5. i can simply embed the code, switch back to Visual mode, and align the video to center to make it balance in posts. But in WP 2.5.1., the video turns to blank image everytime i put it on center.

    Do you get these errors too?

  • Leland

    @Robin: I’m actually using Viper’s plugin on another site (powered by 2.5.1) and don’t experience such problems.

  • http://www.CompleteNewEngland.com Cliff Calderwood

    Do you have a tutorial on Podcasting – I searched but couldn’t find one?

    Cliff

  • Leland

    @Cliff: Not yet. ;)

  • http://blog.clubopera.com/ Fabino

    Very good recommendations! Thanks a lot!

  • http://www.robinmalau.com Robin

    I try to upgrade Viper’s today and it works. Thanks.

  • http://isthisnikhil.com Nikhil Gupta

    Hi Leland, I am using this plugin. But when I use the tags to display the video, instead a text link pointing to the YouTube Video is created. Is there something I’m missing?
    How can I configure it to show the Video as an embedded Flash Video?

  • Leland

    @Nikhil Gupta: You’re probably not using the right button…try just typing in [youtube]http://www.youtube.com/watch?v=MWYi4_COZMU[/youtube]

    It should display an embedded YouTube video. For the flv you may want to try it with [flv] tags or just use the FLV embed plugin how I explained above.

  • http://isthisnikhil.com Nikhil Gupta

    ok will give it another try, Leland…
    But the reply was quick :P

  • http://www.idimensie.nl Remkus

    Hi Leland,

    Great plugin and seems to work perfectly inside the loop, but do you have a solution if you would like to use it as a widget in the sidebar?

  • Pingback: In My RSS Reader This Week - 4th Edition | General Marketing Blog

  • http://www.poker001.com noxpert

    Re: embedding help, please….
    How would I embed something like the code below: WP just seems to strip it out when I use the normal editor for a post:

  • http://www.poker001.com noxpert

    Posting not working for me: how do I embed flash movie with URL?

  • Leland

    @Remkus: I’d just use a text widget, but there may be a better plugin available. I’m not sure.

    @noexpert: Not sure why you’re having problems. You may need to use the code editor.

  • http://products.agriya.com/flv-player agriya

    It is nice and useful

  • http://webdesignwatchdog.com/ Trisha Cupra, Web Design Watchdog

    I use Viper’s plugin, too. I find it easiest to use.

  • http://products.agriya.com/flv-player Agriya Flv Player

    It is easy to use. It’s very nice.

  • Pingback: Wired to The Sun » Testing Videos

  • Pingback: General Marketing Blog - Hints, Tips and More

  • http://northeasttexasbankruptcy.com Brian Allen

    I need a plug in for WP 2.5 to embed others’ .WMV files, any exist?

  • randy

    OK so I’m installed FLV embed plugin but what do I do after that? What kind of file format must I upload to my blog and how do I insert that into a post?
    Sorry about this newbie question.

  • Leland

    @randy: Well, with FLV embed…you would need an FLV video file.

  • randy

    Ok so I create an FLV file
    Do I just upload that to the media folder.
    How then do I insert that into a post so that it shows. Do I do just click on add video icon?

    The reason I perhaps am confused is that I have Camtasia studio which when you publish for a blog creats a folder with a shockwave Flash object, a Htm file (which must be opened for play) and a Jscipt file. When I upload these to the media folder and insert it just creates a link in the post which doesn’t work???

  • Leland

    @randy: Camtasia creates a bunch of files you would need to run an FLV file on a standalone webpage (i.e. the Javascript and HTML) but with the FLV Embed plugin installed, it has all of these taken care of already. You just need to upload the FLV file.

    Okay, now I see why you’re getting confused. I actually installed the FLV Embed plugin myself (on Theme Lab) and the shortcode is now being turned into a blank video. The shortcode should be written in this format:

    [flv:url width height]

    • randy

      Thanks Leland. Please bear with me as I don’t know what you mean by short code or how to insert that.

      (I have inserted code from YouTube but that code was already generated for me)
      Do I insert that short code into the html part of editing a post. Do I manually type it in or is this something I insert by clicking and copying and paste.

      Could you please explain how to translate my uploaded video file information into your ‘short code’.

  • Leland

    Okay, lets say you have a flv file called video.flv that is 480 pixels high and 368 pixels wide. You can upload it through FTP to /wp-content/uploads/, so the full path to the video is http://www.example.com/wp-content/uploads/video.flv

    With the FLV Embed plugin activated, you would insert this shortcode into your post, like you would any other kind of content.

    [flv:http://www.example.com/wp-content/uploads/video.flv 480 368]

    However with the FLV Embed on, it would translate this into a fully featured video player, and will output the proper HTML in your published post.

    Hope this makes sense.

    • randy

      THANKS so much Leland for your help. It only took 2 plus hours to get working but it would have been more without your advise.

      One more question about a standalone webpage. Would you use the same code format? I understand you also have to upload the FLV player into the same folder as your video file?

  • Leland

    @randy: The standalone webpage is pretty much only relevant with software like Camtasia. When you produce a video with it, it doesn’t just generate the raw video file, it includes all the flash files, javascript, and HTML you’ll need.

  • Rob Ager

    Thanks for the tips and I have downloaded FLV Embed. Only one problem, I cannot get text to wrap around the player within a post. Any ideas on how to solve this?

  • http://zamrin.net zam

    Hi Leland,

    How about megavideo? Can it be use with megavideo ?

  • Leland

    @Rob Ager: Did you try putting it in a div and floating left or right?

    @zam: Viper’s Video Quicktags doesn’t appear to support MegaVideo…although if they have embed codes I would imagine it wouldn’t be too hard to implement.

  • paappo

    Worked like a charm with wp 2.8.4
    Took under 5 minutes to install and publish videos.

    Awesome :)

  • Ileana Jimenez

    How do you attach an .mov to WordPress.com? Trying to do it and can’t! Would love your help please!

    • Leland

      Check out this page for embedding .mov files.

      As for embedding it automatically with a plugin, you should probably ask WordPress.com support about that.

  • http://www.dmaireroa.com Danny Maireroa

    Nice! I got it going and very easy to use. Can this work with a playlist??

  • http://thegreenoutfitters.com Kobra

    Cant get the plug in to work. All seems well. I have done the normal trouble shooting. Not sure if im missing a basic step, or if its a permission thing. Have tried the FLV Embed plug in, as well as wimpy video player, and html hard coding. Nothing is working. Any ideas? Thanks
    PEACE

  • http://zamrin.net zam

    Hai,

    I’m looking for megaupload as I check this plugin not included Megaupload.

  • http://paulrittell.com Paul Rittell

    I am just getting started with WordPress and am looking to upload HD videos to my website and show them without having to host them on a third party. I have tried uploading them and have gone through several steps of troubleshooting and resolved several errors related to upload size. I first had to enter the code
    upload_max_filesize = 64M
    post_max_size = 64M
    max_execution_time = 300
    to the php5.ini file to be able to get the entire video to upload. I am currently stuck at “http error” when WordPress starts “crunching”. I am uploading them by going to the WordPress admin page > Media > Add New > and then selecting the file to be uploaded. I have tried file formats of .flv and .mpg at 720p quality. Any ideas?

    • Leland

      Try uploading the videos through FTP? Uploading large files through your web browser tends to be pretty unreliable.

  • Chris

    I have some green screen video I’d like to add to a site. Is this possible to do w/ the viper plugin? I’m thinking it may just be possible to make the bckgrnd color full white so it would appear that way. Any suggestions would be greatly appreciated though.

    Thnx

  • http://www.webguide4u.com Vivek Parmar

    the easiest way to embed video is to copy the video url and paste that url in HTML editor