Transparent frame layered over embedded object. Object not viewing through frame

Get Started
1

Hi there,

I am working on a project that requires a screen “frame” graphic over the top of an embedded movie object. The graphic is a transparent .png stacked over the embedded object. The movie is a You Tube video. As you can see the video does not show through in the link provided.

http://www.newmanexpressions.com//sandbox/Billy/Test/videoTest.html

Here is the html for the page passed in the I frame of the media viewer.



<!DOCTYPE html PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8">
    <title>title</title>
	<meta name="description" content="a description of your page">
	<meta name="keywords" content="a, list, of, keywords">

<style type="text/css">
* {margin:0; padding:0;}
#back {background: #fff;
	width:761px;
	height:354px;
}

#viewer {background:transparent url(viewPort.png) no-repeat;
	width:761px;
	height:354px;
	position:relative;
}

a img{border:0 none;}
img.left {float:left; padding:155px 0 0 40px;}
img.right {float:right; padding:155px 40px 0 0;}

#soundCloud {padding:250px 0 0 80px;}

#youTube {padding-left: 10px;}

</style>

	<link rel="stylesheet" type="text/css" href="../css2/template.css">
	<link rel="stylesheet" type="text/css" href="../css2/mediaPlayers.css">
	<script type="text/javascript">

</script>

<!-- shareThis -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-874391ac-8ab5-972-6a1a-245f29032bd9"}); </script>
<!-- END shareThis -->

 </head>
<body>
<div id="viewer"></div>
<object width="742" height="354" id="youTube"><param name="movie" value="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="742" height="354" allowscriptaccess="always" allowfullscreen="true"></embed></object>	
<div id="back"></div>



</body>
</html>
2

What I am wondering is… How does a guy use a frame like this and stack it over a movie object with permitted transparency? Is there something I am missing about this process?