Iframe hides styling of container

[R-Online]

I am designing a site that has a semi-transparent container for the content, which is divided into two columns. My CSS:\[code\]#content { width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px; background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}#sidebox { width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right; background-color: #FFF}#main { width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}\[/code\]The HTML for embedding the video:\[code\]<div id="content"> <div id="sidebox">...</div> <div id="main"> <div class="post"> <a name="song" /> <p class="title">New song!</p> <p class="date">Posted January 16, 2013</p> <center> <iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM" frameborder="0" allowfullscreen style="margin-left: -3%" /> </center> </div> </div></div>\[/code\]I put some static stuff in the sidebox and then make news posts to the main div. If I embed a video in an iframe in main, then the semi-opaque background from content (as well as the drop-shadow) doesn't render. I found a lot of solutions geared towards what to do if you want to overlay a div on an iframe, but nothing about putting an iframe in a div container screwing up the styling of that container.The website, which currently has the video embedded: http://physics.nyu.edu/~dzb212/music_index.html