Adding Video to Your Website

Before you add any
video to your web page, it's
important to understand that
videos can take up a lot of
web page space (file size)
and bandwidth. Every time
someone clicks to view the
video they will be taking up
some of your allocated
bandwidth.

Be sure to check with your web host if you're not sure how much you are provided. If you're paying a monthly fee for web hosting, you could exceed your limits and be charged an extra fee if enough people view your video file.

Uploading the Video

First you must
upload/save your video to
your web server. You
may want to create a folder
called "video" and save it
there. So the path to your
video will be something like
http://yoursite.com/video/movie.avi.

Embedding the Video

One thing you should keep
in mind is that every web
browser treats videos
differently. What may
work in one browser, may not
work in another. So
you should use both old and
new HTML embed tags.
(<object> and <embed>).
See the sample code below:

Be sure your width
and height attributes
match the size of your
video. The
variables above are just
examples. You may
want to add a few pixels
to allow for the player
controls.

The movie.avi is the
path to your movie file.
You may have to
edit the path if your
movie is stored in a
different folder.
If you're not sure, use
the complete path
http://yoursite.com/video/movie.avi,
for example.

The
controller attribute
displays the video
controls.

The autoplay
attribute tells the
browser to play (or not
play) the video when the
page loads. True
means it will play
automatically, false
means the user will need
to click the Play button.

The pluginspace tag
will prompt the user to
download quicktime if
they do not already have
it.

Replace
musicfile.wav
with the name of the
music file you chose
to upload to your
web server. The code
above also assumes
you've saved the
file in the same
location of your
homepage
(index.html). If
you save the file
inside a folder on
your root then you'd
have to change the
path slightly.

Let's say you want
to load the song on
your homepage
(page name is index.html). You
save the song file
to a folder called
"music" located off
your root/main
directory. Then the
code you insert in
your index.html page
would look like
something this:

<embed
src="/music/musicfile.wav"
autostart="true"
loop="false">

This is telling the
browser to look for
the song file at...
http://www.yoursite.com/music/musicfile.wav

If
you're not
comfortable with
using relative paths
in your code, then
you can use the
absolute (complete)
path to your music
file. For
example, your code
may look something
like

Notice the full URL
to the music file is
listed in the code
rather than starting
with /music/....

Music File
Attributes

After the path to
your music file,
you'll see a couple
of attributes:

The autostart
attribute tells the
song file how to
begin. If you have
this set to "true",
the song file will
begin playing
automatically when
the page loads. If
you put in "false",
the sound file will
not start
automatically and
the visitor will
have to start the
song by using their
embedded media
player.

The loop
attribute tells the
song how many times
to play. If you
have this set to
"true" then it will
play over and over
again
automatically. If
you have it set to
"false" it will play
once and stop.

The hidden
attribute tells the
browser whether or
not to hide the
media player.
It's not a good idea
to leave this value
at "true" unless you
know for sure your
visitors don't want
to stop the music.

You don't want your
music to annoy them
to the point they
leave because they
can't figure out how
to turn the music
off.

Adjusting the Size of The Media Player

You can customize
the look of the
embedded/default
media player on your
visitor's PC by
adding a width
and height
attribute to the
code. Be
careful as you
adjust the size of
the player because
you can distort it.

An Easier Way to Add Video

Thanks to YouTube, adding video to your site is so much easier now. You can upload the file to YouTube, select Share underneath video and grab the embed code.

Simply paste this code into your site and you're good to go!

The other advantage of embedding YouTube videos is the more views your video receives the more it might impact the organic rankings of the video in YouTube. So if your video is getting watched on your site and YouTube it could have a positive impact on rankings.

And finally, you don't have to worry about the embedded videos eating up your hosting bandwidth because the video is hosted on YouTube -- not your web host.