Q:

Video is not centering itself like the rest of my code

So I've been using the same format to center everything according to ALL screen resolutions. This has been going good for a while, until I tried to add a video.
Is it SPECIFICALLY because it's a video?
JSFIDDLE:
http://jsfiddle.net/SgQ56/
Here is my code.
HTML
<body>
<div id="page-wrap">
    <div id="header">
        <img src="http://i.imgur.com/UMz3wIf.png" />
    </div>
    <img src="http://i.imgur.com/8snNfFV.png" />
    <ul id="nav">
        <li><a href="http://www.voyage-us.com">Home</a></li>
        <li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li>
        <li><a href="http://www.voyage-us.com/members">Members</a></li>
        <li><a href="http://www.google.com">Streams</a></li>
        <li><a href="http://www.google.com">Contact Us</a></li>
    </ul>
    <div class="clear"></div>
    <div id="mainbody">
        <img src="http://i.imgur.com/oMJE74H.png" /></div>

    <div id="banished">
        <iframe width="325" height="240" src="http://www.youtube.com/embed/Ls8FBFFjMxk" frameborder="0" allowfullscreen></iframe>
    </div>

    <div id="footer">
    <p>&copy;2014 Rythmn Designs<p></div>
</div>
</body>

CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}

.clear
{
clear:both;
}

#page-wrap
{
width: 1019px;
margin: 0 auto;
}

#header
{
width:100%;
text-align: center;
display: block;
}

.readmore
{
position: absolute;
margin: 0 auto;
top: 352px;
right: 382px
}

#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}

#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size:  14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}

#nav li a:hover, #nav li a:active
{
color: red;
}

#mainbody
{
vertical-align:top;
position:relative
}

.news2
{
margin: 0 auto;
position: absolute;
top: 125px;
right: 375px
}

#banished
{
margin: 0 auto;
position: absolute;
top: 685px;
right:488px;
}

.news1
{
margin: 0 auto;
position: absolute;
top: 400px;
right: 378px
}

.teamspeak
{
position: absolute;
top: 125px;
right: 30px

}

#ts3viewer_1037062
{
position:absolute;
top: 155px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}

.twitter-timeline
{
right: 27px;
top: 407px;
position:absolute;
width: 310;
height:230;
}

.twitter
{
right: 35px;
top: 406px;
position:absolute;
width: 310;
height:230;
}

#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size:  12px;
position: relative;
}

A:

Does this help? I tested it on my laptop and it seems to be in place
//edit Ok I think I fixed it this time??
#banished{
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 50%;
}
#banished iframe {
    position: absolute;
    top: 370px;
    left: 633px;
    height: 15%;
    width: 35%;
}

I also put #banshed inside the #mainbody tag in the html

