Video is not centering itself like the rest of my code

StackOverflow https://stackoverflow.com/questions/21842337

Question

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;
}
Was it helpful?

Solution

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

OTHER TIPS

I think you typed right instead of left in #banished. If you change top to 690px and left to 650px it puts the video in the right place (probably not pixel perfect, you can adjust that)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top