when trying to troubleshoot css issues, use FireFox and FireBug.
FireBug is a very easy to use extension for FireFox that allows you to explore the document model in the browser and see the css effecting each part an interact with it in real time.
the div that contains the movie has the following style:
#VideoPreview {
clear: both;
height: 148px;
margin-bottom: 5px;
margin-top: 50px;
width: 964px;
}
you are specifically setting the height of the video preview element to 148px. However, the video is in an iframe that is given the height of 493px. no overflow has been set, so the page is using the 148px height for the video element, this is used for positioning the footer, then video is overflowing and covering the footer.
change the height of the video preview element to 493px
NOTE: in your css file, it is defined twice, the first time as:
#VideoPreview {
width: 970px;
margin-top: 15px;
margin-bottom: 15px;
float: right;
}
the second one over rides the first.
