How do you put thumb videos on a webpage?

I was wondering if anyone could help me with the html code to insert a thumb video with an arrow that when you click it opens up a large video on a webpage. The same way that the quicktime page has thumb videos on their webpage. I have FCP Academic 7.0.3 and I am working on a I Mac when I publish a video it appears as a small thumb video with an arrow on it on my desktop. When I click the thumb video it opens to a full large 1080i video which is what I compressed it to.

I do not know where to go from here and how to put in the proper html code so that my 4 thumb videos will show and open on one of my webpage pages. I reviewed the source code from the Quicktime homepage which has thumb videos but I'm not sure if that is the code I need to copy and put in for my videos (obviously changing the name of the videos to match my own videos). I know that there are component video players which you can purchase/use but I don't think that they are what I need since I already have produced the thumb videos and they function and open to a large video on my desktop.

I would appreciate any help which I can get. This is the source code from the quicktime homepage which I image is similar to the html code that I would need to incorporate.

--

</div>
<div class="column last">
<div></div>
<div class="box sidebox videos" id="sb-videos">
<h2>Latest Videos</h2>
<div id="sb-v-featured"></div>
<ul>
<li>
<a href="/iphone/videos/#tv-ads-siri" class="video-thumb">
<span class="image">
<span class="play"></span>
<img src="./startpage/images/video_iphone4s_ad.jpg" alt="" width="145" height="84" />
</span>
iPhone 4S Ad
</a>
</li><li>
<a href="/iphone/#video-4s" class="video-thumb">
<span class="image">
<span class="play"></span>
<img src="./startpage/images/video_iphone4s_video.jpg" alt="" width="145" height="84" />
</span>
iPhone 4S Video
</a>
</li><li>
<a href="/iphone/#video-icloud" class="video-thumb">
<span class="image">
<span class="play"></span>
<img src="./startpage/images/video_icloud.jpg" alt="" width="145" height="84" />
</span>
iCloud Video
</a>
</li><li>
<a href="/apple-events/october-2011/" class="video-thumb">
<span class="image">
<span class="play"></span>
<img src="./startpage/images/video_iphone4s_keynote.jpg" alt="" width="145" height="84" />
</span>
iPhone 4S Keynote
</a>
</li><li>
<a href="/ipad/videos/#play-guided-tours-ads" class="video-thumb">
<span class="image">
<span class="play"></span>
<img src="./startpage/images/video_ipad2_ad.jpg" alt="" width="145" height="84" />
</span>
iPad 2 TV Ad
</a>
</li>
</ul>
</div>