LESSON #41: How to Put a Video on Your Website

By | June 4, 2009
172 Comments

In the previous lesson, we talked about how to obtain and add graphics to your website.

Today we’re going to put your website into motion by adding video to it.

(Watch this video…)

Join my coaching club

Main points:

  • Video is one of the most important forms of content on the Internet.

  • Most Internet users can now stream video (and the quality keeps getting better).

  • Ways to put video onto your website…

    1) An embeddable video from a 3rd party source.

    – Easiest way to put video on your website.
    – Hundreds of sources, including niche sites with videos for syndication
    – Free video hosts like Youtube, Vimeo, Veoh, blip.tv, Revver, Tangle, Flickr, Facebook, etc.

    -See video for demo of embedding a Youtube video on a WordPress blog.

    2) Your own “live action” video.

    – Most complicated method… you have to shoot it, transfer it, edit it, encode it, etc.

    – Can be very expensive (ex. $4,000 HD camera, $1300 Final Cut Studio, $700 Adobe Flash, etc)

    – Can be done very cheaply. Try the Flip Video camera ($50 – $200)

    -Two ways to embed it:

    a) Upload it to a video site like Youtube, and then embed it on your website.

    Easy to do, but free video hosts have some downfalls including…
    – Looks less professional
    – Displays ads (overlay on video, or at the beginning/end)
    – Links to the video host

    b) Convert it to flash yourself, and then embed it on your website

    – Free tool: FLV Producer Lite
    – Free flash player included in the above tool, or you could try JW FLV Player

    If you’re doing a lot of heavy video streaming (1000’s of viewers), I recommend upgrading to a dedicated server or else try Amazon S3 to host your video files.

    3) Your own screen capture video.

    – Great for teaching
    – Effective for selling

    – I use Camtasia Studio from Techsmith (Approx. $300)

    – For Camtasia tutorials see: http://www.techsmith.com/learn/camtasia/default.asp

    – (See video for walkthrough of my recommended Camtasia settings)

    – Cool tool from Techsmith to make casual screen capture videos on the fly: http://www.jingproject.com

    – Free screen capture software: http://www.CamStudio.org

    – Better than the free version: http://www.CamStudioPro.org (only $29)

    Recommended resource:

    Video series

    Click here for more information…

    (A four part video series teaching exactly how to create your own screen capture videos for free.)

    Action steps:

    1) Think about how you can incorporate video into your online business.

    Ideas: Blog content, teaching series, intro video, video sales letter, explain checkout process, give your guarantee, explain email opt-in process, testimonials, squeeze page video, exit pop video, etc.

    2) Add a video to your website!

    In the next lesson we’ll be looking at how to put audio onto your website.

    As always, you are welcome to post your questions and comments below.

    Have a great day!

    Tweet

    • 172 thoughts on “LESSON #41: How to Put a Video on Your Website”

    1. stan

      Eric,
      Thanks for great lesson.
      You use iframe so the video loads faster, is that right? or I am mis-understanding it?

      Is iframing needed if you are using amazon s3 service?
      Thanks.

      Reply ↓
    2. Clay

      Hi Eric:

      You have great info. I wanted to know how or rather what is the best way to embed a slide show presentation on to a website that will play automatically once the play button is pressed.

      Thanks.

      Clay Berry

      Reply ↓
    3. Dave

      Eric,

      What would you suggest for converting my Flip Mino HD MP4 videos into flash so that I can maintain the HD aspect ratio while reducing the overall dimensions? FLV Producer doesn’t seem to support HD except for Step 2 “original resolution”.

      Thanks for a great site, Bro.

      -dave

      Reply ↓
    4. Kristina Lim

      Hi Eric,

      I’m working on my sister’s missionary website and she has a Powerpoint presentation that would be nice to include. So is a screen capture video the best way to do that, or is there some other way to convert a Powerpoint to flash?

      Reply ↓
    6. devonte

      how to put a video on your website please help me please i have been try for weeks now please

      Reply ↓
    9. Eric Post author

      Yes screen capture video is a good way to do it. Camtasia actually has a built in powerpoint plugin, which is what I would use. But that might be a bit pricey if you just need to convert one powerpoint presentation.

      I did see this:
      http://www.powerpoint-to-flash.com/download/powerpoint-to-flash-download.html

      there is a free trial… I’m not sure how badly it watermarks the video on the trial.

      here is another possible solution:

      http://labnol.blogspot.com/2006/09/embed-powerpoint-slides-as-flash.html

      Reply ↓
    10. Eric Post author

      Hmmm good question. I didn’t realize it wouldn’t accept MP4. If it was me, I would use Camtasia’s producer. But if you don’t have Camtasia…

      I checked out Flip’s website and it said that their bundled software can down convert the HD videos to a shareable format. Maybe try the software that came with your flip to convert to MOV or WMV first?

      Reply ↓
    11. Eric Post author

      Depends on what kind of slide show. If it’s a Powerpoint presentation, then Camtasia would be my top choice.

      If it’s just a picture slideshow, there are several free online sites you could use (but they all do advertise for themselves somewhere on/in the slideshow).
      For example: http://animoto.com/

      Reply ↓
    12. Eric Post author

      Actually the Iframe does not help the video load faster, but it helps the PAGE load faster by not loading the video. Instead of loading the video when the page loads, it just loads a simple JPG image which is in my Iframe.

      Reply ↓
    13. Val

      Hi Eric,

      Your teaching is great. I have one question though. If I want people to also be able to download the video so they can watch it offline, how do I do that?

      Reply ↓
    14. Mark

      I tried to install FLV producer lite and got nine error messages all with error code 1904. Has anyone else had this problem?

      I have requested a help ticket form them but still have no answer.

      Any help would be appreciated.

      Reply ↓
    15. Eric Post author

      Ouch… I do not know about that one. Have you tried rebooting your computer after installing? Sometimes that helps. If not, it sounds like maybe there are windows registry file issues…

      Reply ↓
    16. Eric Post author

      Good question. At this time I’m not making them available for download because I’m planning on selling them as a package at some time in the future.

      Reply ↓
    17. Mark

      Yes, I tried to reboot and I reinstalled but still same problem. I have gotten some response back from help desk.

      They said go to c:\Program Files\FLV Producer Lite\components then double click on the file called RepairVideoStudio.bat.

      I did this still problem.

      They said Sounds like you’re missing a codec.

      They said they started using the MPG4 conversion on certain video files for a couple of reasons. Some files ended up having a higher quality and then we also wanted to be able to convert all file formats over to FLV. Some that didn’t require it before, require it now.

      Go to:
      c:\Program Files\FLV Producer Lite\components\mpeg4\

      The double click on the app called runinf.exe

      That will install the mpeg 4 codec on your system. You will probably get a warning about it not passing an inspection but you need to click on “Continue Anyway”.

      After that, you’ll be creating a temp file that converts into mpg4 and then that file will get converted to flv.

      I did this but they never told me how to creat a temp file that converts into mpg4 and then that file will get converted to flv.

      I had an old mpeg4 file to test and the program worked but I do not know how to convert my AVI files to mpeg4

      They have not gotten back to me so if you know how to do that, great and if not I will wait to see if they get back to me.

      Reply ↓
    18. Eric Post author

      I really do not know how to do that. Hopefully they will be able to help you get it solved. If not, you might need to find another solution.

      Reply ↓
    19. STAN

      Eric,
      I got camtasia 6.
      I recorded 2min 9 sec and embed into HTML. I followed your other specifications like 590/442; 50% JPEG compression etc.

      Still 2 min 9 sec video took 5.58mb.
      I thought it is around 1mb per minute.

      What else to compress the video.

      another one: when we check embed video, it is giving html page. But if I want to place video on my blog, just the way you did, do we need to embed into html or just save and upload to server.?

      Thanks.

      Reply ↓
    20. Eric Post author

      There are other factors involved, one of the main ones being how much motion you have in your video. If there’s a lot of action, the size will be bigger. Also I’ve found that sometimes there’s a bit of a curve to the length of video vs. size of file ratio. For example if you tripled the length of your current video, it might only double in size.

      Overall, 5.58 mb is not too bad for that length… it will stream fast for most people, but you can always do some trail and error to see if you can drop the size more without reducing quality too much.

      You also might try exporting it as an MP4 instead of SWF, and see how that works for you.

      As for embedding… it just depends on how you’re embedding it. I explained in a comment above that I export it with the HTML page, then I use an IFRAME to put it on my blog.

      Embedding it directly on a blog without an Iframe can be a little more complicated. Here are some instructions:

      http://knowledgeconstructs.com/embedding-camtasia-swf-videos-in-wordpress

      http://www.screencast.com/t/neg7gAA5Tp

      Reply ↓
    22. Mark

      Eric I have been trying to figure out how you do the Iframe and extra HTML page for days and have not been able to do it.

      My request is to have you make a video how to do that or to send me to another source that explains it well.

      Thanks Mark

      Reply ↓
    23. Eric Post author

      The HTML page is generated by Camtasia when you export the video. You know how to do that part, right?

      Or… if you’re not using Camtasia, you know how to embed a video onto an HTML page, right?

      It should just be a plain HTML page with nothing on it except the video.

      The html page is contained in the same directory as the video file(s) (ie. the SWF or FLV file).

      By default, Camtasia will name the HTML page the same name as your video. Make sure there’s no spaces in the video name. For example, if your video is named ‘videolesson1’, Camtasia will generate a folder named videolesson1, and within that folder will be a file named videolesson1.html. You can keep it as that name, or you could rename it to index.html.

      You would upload that folder to your website (into the public_html directory).

      At that point, if you go directly to that HTML page, you should see the video. Like this:

      http://www.ericstips.com/LESSONS/lesson41/lesson41.html

      What you can then do is make an extra HTML page containing a hyperlink TO the video page, and put this HTML page within the same directory. In my case, I add an image that is hyperlinked to the video file, like this:

      http://www.ericstips.com/LESSONS/lesson41/index1.html

      At that point, you simply need to make an Iframe where you want the video to actually appear. And in that IFrame, you will put the URL of the extra HTML page that you created.

      In my case, the IFrame is this code:

      Reply ↓
    24. Tim Ackley

      Eric,

      Thank you so much for this information!
      You do a great job of delivering extremely
      useful content.

      Tim

      Reply ↓
    25. Revat

      Dear Eric,
      very nice & thanks for the same.
      So many information you provide in each of the video.
      Thanks again.

      Reply ↓
    26. Mark Diede

      Thanks for all the input!

      This video stuff is what I want but it is driving me nuts. I am trying to do this using Xsitepro and I have spent MANY hours attempting how to do this. When I am in Xsitepro and I am adding a page to my website and I am in the design tab and I right click to insert video I can get it to work if I just use an AVI file or just an FLV file but it does not have all the bells and whistles on it that I would like that I can create with Camstudiopro using the web wizard and page designer. When I use the web wizard in camstudiopro and convert the AVI file I get 4 files: Charcoal.swf, FLVVideo.FLV, index.htm and swfobject.js. I do not know how to get all of these files to upload to my website using xsitepro. If I just use the FLV file like I explained above I can get it to upload but not with all the changes that I did in Web Wizard and Page Designer in Camstudiopro.

      I even tried using FileZilla and put the Charcoal.swf, FLVVideo.FLV, index.htm and swfobject.js files in the video and script folders but I could not get it to work. The one thing I found odd is when I was using Filezilla I had no public html file. All I have is a blog folder with my wordpress in it, a cgi-bin folder, images folder, script folder, video folder and a bunch of files from xsitepro. Also no www folder.

      I know it is possible to get this to work but how I need to do it I can not figure it out for the life of me.

      I would appreciate your help if possible.

      Thanks Mark

      Reply ↓
    27. Mark Diede

      Followup to what I wrote last. I did figure out how to up load the 4 files: Charcoal.swf, FLVVideo.FLV, test3.htm and swfobject.js using xsitepro and put them into their appropriate folders. My problem is now when I use camstudiopro page designer I created the source code for my test3.htm file and I pasted it in the souce area of new page I created in Xsitepro. The url for that is http://infrastructurehealing.com/test3.htm
      You can see that the video is not present. I know I am missing a step but I need some direction.

      Any help would be appreciated.

      Reply ↓
    28. Mark Diede

      I had a previous post that I am not sure where it went put I want to let you know I did figure it out how to upload my video files from camstudiopro to XSP. The files had to go into just the root directory not the video or script folders. Took me for ever to figure it out. I new it was simple.In XSP pro you go to other tab and the resource manager and ten load files from there.

      Mark

      Reply ↓
    30. Brooke

      Eric,

      Thanks for all your videos. You are answering some questions I have had in my head for long time, on the technical stuff like how to create videos. This information is very helpful. Thank you so much.

      Reply ↓
    32. Alisa

      Valuable information and valuable lesson…and I don’t know which one coming from you is not :))
      I really enjoy learning this way.
      Thank you!

      Reply ↓
    33. Anonymous

      Great ad Eric but Y not use Microsoft media encoder ? for screen capture presentations .Microsoft also has help on how to use this software(FREE to download from Microsoft) and VLC does streaming etc…

      Reply ↓
    34. Eric Post author

      Because I do not want to encode as a Windows file.. I want to encode as flash, which is faster and more universally compatible for the web.

      Reply ↓
    35. Michael

      Hi Eric, I am able to post videos on my website but I am missing the lower portion of the video options to play, pause and scroll back and forth, adjust volume ect. any suggestions?

      Reply ↓
    36. Eric Post author

      That all depends on the flash player that you’re embedding. If you’re using camtasia, those are options that you can select during the export process. If you’re using a free 3rd party flash player, you may need to look at their help files to see which variables you need to include in the embed code in order to display the player controls.

      Reply ↓
    38. Eric Post author

      Yes you can embed video in an HTML email, but I wouldn’t recommend it… not yet anyway. Most email clients won’t play it, and it may trigger virus alerts.

      Reply ↓
    39. Richard

      Hi Eric, I would love to have Camtasia in my tool box and will one day. I just so happen to have Camstudio Pro from Dave Guindon, (he is truly a gentleman amongst internet marketers , that goes for you too.) With that said I have an Acer laptop with built in webcam and microphone, however I seem to have no good audio with using Cam Studio Pro so I tried a $15 microphone which is not USB just plug in and Cam Studio Pro doesn’t register it. (I am not surprised what do you expect for $15 bucks, although the built in Mic is Realtek High Definition and its details register with Cam Studio Pro. Anyhow I will check out the next lesson about audio see what I can do in the meantime otherwise I might have to get a decent microphone (logic) or ask Dave. If you got any ideas let me know if not already covered in next lesson. Thanks

      Reply ↓
    41. Ramesh

      Hi Eric, I read all your lessons…it is very helpful for me….You are doing a great service
      Thank u sooooooooooooo much.

      Reply ↓
    44. Eric Post author

      It depends on the objective of your site and the particular page that you’re putting the video on. If it’s a squeeze page then the objective of the video is to grab their interest and compell them to opt-in. If it’s a sales page then the video should be complementary to your sales letter, or in place of your sales letter. If it’s a blog, then the objective is to provide good information and keep your readers coming back for more.

      Reply ↓
    46. Leigh

      Eric,
      I’ve been trying to catch up on the lessons – they’ve been really excellent, especially for newbies like me, so thank you very much.
      I bought the video tutorials you’re offering to start using Camstudio and FLV Producer. I’ve managed to get to the point where I have the index.html, player.swf and ‘myvideo’.flv files and everything is working OK – I can see and hear the screen capture video I produced in a browser. However, I want to put the video onto my WordPress site (self-hosted with Hostgator). I’ve pasted the html code into the page editor in the WP admin panel and uploaded the other two files to public_html folder on the site. When I look at the relevant page through the browser I can see a space where the video should be but nothing else. Have I put the .swf and .flv files in the correct directory? Do I need a plugin for WP? if so, which one etc? Or do you have any other ideas? As you are probably aware, the videos don’t mention WP.

      Reply ↓
    47. Eric Post author

      First make sure that the visual editor is turned OFF. I show this in my WP settings lesson.

      Next, I would suggest making a special folder for your videos, like example.com/videos/

      That way your public_html won’t get too cluttered.

      Next I would suggest switching all URL’s within your video code to “absolute URL’s” before embedding them.

      For example, if the code calls for ‘video1.flv’ change it to ‘http://example.com/videos/video1/video1.flv’ (or wherever the file is actually located). Try that…

      Reply ↓
    49. Leigh

      Eric,

      As you suggested I created a ‘videos’ folder within public_html on my site and then went into WP editor (with visual editor ‘off’) and changed all .swf and .flv references to absolute URLs – http://mydomain.com/public_html/videos/file.swf. Now when the page loads on the site I can briefly see an outline which is approximately the size video pane but it quickly disappears. I’ll keep playing with it unless you have any other ideas

      Reply ↓
    50. Leigh

      Stumbled on it! I removed the public_html from the absolute URLs and it works.

      Thanks for the earlier pointer Eric – it was good to figure some of it out for myself as well

      Reply ↓

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    The maximum upload file size: 50 MB. You can upload: image, audio, video. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here