HTML

How to add a video to your website

There are hundreds of ways to add video to a Wordpress blog, Flash Video is a good place to start.  If all you want is to embed a Youtube then Smart Youtube from Vladimir Prelovac reduces the complex to the ridiculously simple. If you can find the V on your keyboard then you will master it in a nano second.

But what about a website?  Raw HTML?  Where do you go for that?

I guess I should create a video but until I do here are a few pointers that have worked well for me.  The process from 30,000ft up is:-

  1. Locate the place in your HTML you wish to add your video
  2. Paste in the video code
  3. Save the file

If you are an HTML webmaster guru this will be elementary stuff.  All you have to do is decide which flavour of video player you are going to offer your visitors.  I tested a few and like flowplayer although their demo videos were broken when I tested them!

How to install flowplayer on your website

  1. Download from the free version http://flowplayer.org/download/index.html
  2. Create a folder off the root of your website and call it flowplayer
  3. Upload these files to the new flowplayer directory you just created
    • flowplayer-3.1.5\flowplayer\example\flowplayer-3.1.4.min.js
    • flowplayer-3.1.5\flowplayer\flowplayer.controls-3.1.5.swf
    • flowplayer-3.1.5\flowplayer\flowplayer-3.1.5.swf

The version of flowplayer you download maybe different but the principle is likely to stay the same.

That’s all there is to the installation so let’s see how we can use it in our web page.  Much of this depends on how you prefer to edit your pages, if you do not know how to edit HTML then search Google for HTML tutorials, there are many companies offering top quality training with free books and videos to get you started.  There are plenty of free editors available too, so if you are starting from scratch google for free html editor too.

Ready to integrate video in your web page

Now you have installed your flowplayer all you need to do is add a few lines of code.  First add the Javascript file in the header.

<script type="text/javascript" src="flowplayer/flowplayer-3.1.4.min.js"></script>

Which should look a bit like this when you’re done:-

Locate the position in the HTML where you would like your video and use an Anchor tag and another line of Javascript.

<a href="http://www.yourdomain.com/this-will-be/the-path/to-your-video.mp4"  
 style="display:block;width:346px;height:193px"  
 id="player"></a> 
<script type="text/javascript">
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf");
</script>

Alter the size of the video to suit your page design and make sure you keep the ratio between the height and width the same so that it doesn’t distort the output.

Download an example
Click here to download everything you need to get started. This uses flowplayer 3.1.5 so don’t forget to check their website for updates and new features at flowplayer.org