Trying to put video to my html and css page

Question

I am trying to put video to the center of my html and css page and everytime that video get stuck to top of the left side what to do ? what is wrong ? This is my school project.Can you at least tell me other way to do this.

<!DOCTYPE html>

<HEAD>!
  <TITLE></TITLE>

  <LINK href="to.css" rel="stylesheet" type="text/css">


</HEAD>

<BODY>

  <DIV ID="header">
    <div id="nav">
      <div id="nav_wrapper">
        <ul>
          <li><a href="#">HOME</a>
          </li>
          </li>
          <li> <a href="#">dropdown #1</a>

            <ul>
              <li><a href="#">dropdown #1 item #1</a>
              </li>
              <li><a href="#">dropdown #1 item #2</a>
              </li>
              <li><a href="#">dropdown #1 item #3</a>
              </li>
            </ul>
          </li>
          <li> <a href="#">dropdown #2</a>

            <ul>
              <li><a href="#">dropdown #2 item #1</a>
              </li>
              <li><a href="#">dropdown #2 item #2</a>
              </li>
              <li><a href="#">dropdown #2 item #3</a>
              </li>
            </ul>
          </li>
          </li>
        </ul>
      </div>
      <!-- Nav wrapper end -->
    </div>


  </DIV>

  </DIV>

  <DIV ID="wrapper">
    <DIV ID="content_area">
      <p></p>
      <center>
        <video width="400" height="240" controls>
          <source src="fifa.mp4" type="video/mp4">
            <source src="fifa.ogg" type="video/ogg">
              <source src="fifa.webm" type="video/webm">
                <object data="fifa.mp4" width="320" height="240">
                  <embed src="fifa.swf" width="320" height="240">
                </object>
        </video>
      </center>

    </DIV>
  </DIV>

  <DIV ID="footer">
    Hello and Welcome --------------
  </DIV>

</BODY>

</HTML>

CSS:

body {
    margin: 0;
    padding: 0;
    min-width: 525px;
    font-family: Arial;
    font-size: 17px;
    background-image: url('fifa2.jpg');
}

#header {
    float: left;
    width: 100%;
    height: 100px;
    position: absolute;
    backgroundcolor: }


    #footer {
    float: left;
    width: 100%;
    background-color: #000000;
    font-weight: bold;
    text-align: center;
    position: absolute;
    height: 40px;
    left: 0px;
    bottom: 0px;
}

#wrapper {
    float: left;
    padding-left: 200px;
    padding-right: 125px;
    overflow: hidden;
}

#left_side {
    position: relative;
    float: left;
    width: 200px;
    right: 200px;
    margin-left: -100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#right_side {
    position: relative;
    float: left;
    width: 125px;
    background-color: #66CCCC;
    margin-right: -125px;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#content_area {
    position: relative;
    float: left;
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#nav {
    background-color: #222;
}

#nav_wrapper {
    width: 350px;
    margin: 0 auto;
    text-align: left;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}

#nav ul li {
    display: inline-block;
}

#nav ul li:hover {
    background-color: #333;
}

#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}

#nav ul li:hover ul {
    display: block;
}

#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
}

#nav ul ul li {
    display: block;
}

#nav ul ul li a:hover {
    color: #699;
}

Link to image: https://i.stack.imgur.com/NnvlO.jpg

On a somewhat unrelated note, don't use upper case tags.....it technically breaks spec. — user2366842, Aug 22 '14 at 18:15

score 2 · Accepted Answer · edited May 23 '17 at 10:25

In CSS delete the float: left; from #wrapper the background-color: #ffffff; from the #content_area and adjust the video by using margin-top property. This is however the easiest way around. You might consider doing this correctly by following the instructions in the link below. And a little tip: we use lowercase in HTML nowadays :)

How to vertically center a div for all browsers?

Here is the changed code:

#wrapper {
    padding-left: 200px;
    padding-right: 125px;
    overflow: hidden;
}

#content_area {
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

video {
    margin-top: 250px;
}

Good luck with your school project!

score 0 · Answer 2 · answered Aug 22 '14 at 18:55

If you don't plan on having other content on this page then you can use the following css

video {
    width : 400px;
    height : 240px;
    position : absolute;
    left : 50%;
    top : 50%;
    margin-left : -200px;
    margin-top : -120px;
}

But you should add an id to the video and select it by id.

Trying to put video to my html and css page

2 Answers2