Adding video to site

Hello all.

I have been kicking around the idea of adding a small video to the homepage of my site and using it to explain my sites products etc…

What is the best way to do this? Post it on youtube first and just embed it? or is there other ways to do it without bothering with all extra code?

The video must run smooth, look nice and not slow down my site too much. Nothing bugs me more than watching a video on line and having to wait for it load every few seconds.

Any ideas??

You can do alot with a free account at and then you don’t have to worry about people seeing youtube ads or linking back to their website. I’ve used motionbox for about 6 mos now and find things load quicker than most youtube videos do for me.

Alternatively you could host the video on your own server or maybe amazon aws and use any number of players to play the vid on your site.



Thank you, I will look into this. You mentioned the service is free but when I went to the link it looks like their service has a $24.95 monthly fee. What service do you recommend and is there a charge?

Look again. I just tried it last night - it’s free for the intro package.

thanks eric, i will, must have missed it.

has anyone else used the motion box product? if so what feedback can you give, maybe a sample site that uses it.

Here’s a link that breaks down their membership options - I’ve only used their free service so far but I think even their advanced options are reasonable. I"ll PM you a link to a site where I’ve used them.

Vimeo is another service I’d like to use, but for some reason they frown upon business use and don’t even offer a business plan you can upgrade to. Weird!


Its really has enhanced my knowledge, i was thinking that you tube is the only best option, Thanks for all the inputs being shared here.

I’ve been having a great time playing with Flowplayer this week, a plugin that allows you to present video and audio on your site with nice controls. (There are many others, of course, but of those I’ve tried, this was the nicest.)

Now I’m also checking out Amazon Web Services (as Ravedesigns also suggested) which provides very cheap storage. (Just a single little video hosted on my own server quickly used up a lot of bandwidth while I was testing the video player, so I’m keen to have an external hosting solution.)

c’mon HTML5 bring on the <video>

Hmm, I didn’t realise all browsers but IE support video and audio now. Can that be right? off to test.
Opera on mac doesn’t yet seem to have support for native video.

If you want to host the video yourself this might work for you also.


this looks really good actually, i did check out the link and the quality is very good and seems to work with most browers.

my only concern is that i am kind of a novice when it comes to web design etc… while i did build my own page and work well how much other “stuff” needs to be added to the code to pull something like this off. I doubt it is as easy as simply cutting and pasting code.

any suggestions??

Wow, thanks for the link, Mark. Looks very interesting. I’ll have to read further to see what’s involved in implementing it, but it certainly looks good.

Off Topic:

Wow, there’s also some wicked CSS happening on that page. It’s the most interesting page of CSS I’ve ever seen. E.g.

h2[id]:hover:after, h3[id]:hover:after {
content: " #" attr(id);

Will be supported in 10.50.

Hmm, how do you actually convert a video to ogg format, anyway? Anyone have any links?

EDIT: I know there’s ffmpeg2theora, but you can only use it with command lines (shudder…) suggests Firefogg and ffmpeg2theora, but I’m sure there are others too.

There a few different formats you need to have the video in to support all browsers at the moment so it’s probably harder to get working than some of the other suggestions above.

The idea is that when HTML5 video is supported it can be as simple as an image:

<video src="myVideo.mp4" height="200" width="800" />

Wouldn’t that be awesome.

Will be supported in 10.50.

Thanks Simon! I do need to keep more of an eye on what’s being done at Opera. The latest upgrades have been very impressive.

A question, if it was supported in a build in 2007 was it not made into a release because there was no standard for it? Because the DOM and HTML are sacred?

I know it could get messy if browsers introduced HTML elements as they saw fit - however, it’s seems odd to me that CSS is special in that you seem to have been given more free license to add vendor specific properties.
Is it because CSS doesn’t effect accessibility and there is features built into CSS to simply ignore properties that the browser doesn’t understand?

Thanks Simon. :slight_smile:

<video> has been in HTML5 since 2007, but it has been evolving quite a bit in the spec.

It has not made it into a release because the implementation has not been of release quality (and it still isn’t, but will be soon).


Indeed, we’ve seen that with the first browser war era. :slight_smile: That’s why we’re doing things differently now, with the WHATWG.

CSS does affect accessibility. However, multiple proprietary CSS extensions can co-exist with each other and with a later standardized CSS feature, even if the standardized feature is different to the proprietary extensions. This is because you can have multiple declarations, and unknown ones get ignored. When the standardized feature is widely supported, the proprietary declarations can be dropped from the style sheets and eventually browsers can drop support for the proprietary version (e.g. Firefox dropped support for -moz-opacity recently).

In the DOM, you can have vendor-specific methods (e.g. Firefox had mozDrawText or similar in canvas before text support was added to canvas in the spec).

In HTML, vendor extensions usually end up either being ignored by everyone (e.g. Netscape’s <multicol>) or get copied by everyone else and have to be supported forever (e.g. Netscape’s <embed>).

Long gone are the days of having to download a plug-in for people to view videos on your site, I recommend using YouTube anyway, saves a lot of hassle.

Youtube and other hosting sites do save a bit of hassle for sure, but always be sure you have a plan “B” in place in the event the site hosting your videos has technical issues or decides for some reason that your content violates their terms and isn’t allowed anymore.

It happened with this guy and Vimeo so I’m sure it’s happened to others.