Web and Multimedia Design

I am often asked if it is possible to add a video to a website. You have a video file on your computer and you want to show it to the world through your website. How do you do this?

Videos are trickier to add than most other forms of media for a few reasons:

• They come in a variety of different sizes, definitions and aspect ratios
• There are a lot of different types, such as AVI, MPEG, WMV, MP4, MOV, 3GP, FLV and the list goes on…
• They usually have very large file sizes making them difficult to upload to a web server

So what’s the solution?

Vimeo and YouTube are excellent, free solutions to using video on the internet. When you send your video to Vimeo or YouTube it is automatically converted and compressed to a suitable format and you are given a neat little piece of code that allows you to “embed” the video into your website.

Of the two services YouTube is more popular and faster to work with, but it is often blocked in schools. Vimeo tends to be more widely accessible for schools.

The process for adding a video to Vimeo or YouTube is very similar.

1)      Go to www.vimeo.com or www.youtube.com.

2)      Log in, or create an account if you don’t already have one.

3)      Click Upload or Upload a Video

4)      Select the video file from your computer

5)      While the video is being uploaded you can add a title, description and choose who you want to see the video (Public/Private)

6)      The service will work its magic.

7)      After several minutes your video will be added and you will be able to view it online, share it with others or embed it on your website.

Embedding the video on your website

Both Vimeo and YouTube allow you to “Embed” a video on your website, so it appears within your website page like this:

To add it, find the “Embed” link, which is usually located somewhere on or around your video. When you click this you will be given a piece of code that looks something like this:

<iframe src="http://player.vimeo.com/video/38766976?color=ff9933" width="512" height="288" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

This is ‘HTML code’ and it tells your website to display your video. Copy this code by selecting it and either right clicking with your mouse and selecting “Copy“, or by holding CTRL and C on your keyboard.

Where do you put the code?

Where you put the code depends on the type of website, but typically you should:

1)      Log in to your website so that you can edit it

2)      Go to the page that you want to add your video to

3)      Click the link to edit the page

4)      In the editor click “Source” or “HTML” to allow you to add your code

5)      Paste in the embed code that you copied earlier by either right clicking with your mouse and selecting “Paste” or by holding CTRL and V.

6)      Save your changes and your video will be displayed on the page

*Plugins are available for Joomla and WordPress that allow you to streamline this process. If you would like this feature to be added to your website please feel free to contact me.

Examples

St Winefride’s Primary School in Bradford are making great use of video on their website using Vimeo. The pupils are heavily involved in the creation process and learning how to make videos with fantastic results. Please see:

http://www.stwinefridesprimary.co.uk/