CSS - how to make the iframe inside the div center aligned and the main div also center?


Tags: javascript,jquery,html,css,iframe

Problem :

How to make the iframe inside this div center? right now its showing to the left + the main div is also showing to the left instead of center of the browser.

#video_window { 
/*  width: 100%;
  height: 100%;*/

  width: 850px;
  height: 650px;
  position: fixed; top:0px; left:0px;
  background-color: black;

  overflow: hidden;
  display: none;
  margin: 0 auto;
  padding:1px;
  z-index: 9999;
}

#video_window .video_frame {
  display: none;
  margin-top: 0px;
  margin-bottom: 0px;
/*  margin-left: 10%;
  margin-right: 10%;*/
/*  border: 1px solid #009;  */
}

</style>


<!-- a video screen should be center -->
<div id="video_window" class="video_window" style="
     ">
      <iframe id="video_one" class="video_frame" style="z-index: 0;" width="800" height="600" 
            src="http://www.youtube.com/embed/lVjdlpS_Vzw?rel=0" 
            frameborder="0" allowfullscreen></iframe>

    <iframe id="video_two"  class="video_frame" style="z-index: 0;" width="800" height="600" 
            src="http://www.youtube.com/embed/lVjdlpS_Vzw?rel=0" 
            frameborder="0" allowfullscreen></iframe>

</div>


Solution :

Try putting

margin: 0 auto;

On the .video_frame


    CSS Howto..

    How can I change the css of this when I click on anything but this?

    How to add CSS class to the HTML5 picture element

    How do you indent subsequent lines of text using

    How make a page fit on any screen with any orientation [closed]

    How to animate border transition expand with CSS?

    How do align images vertically centers with CSS and HTML?

    How do I avoid gap when using z-index in CSS?

    How to make a button that can change background color of a doucment?

    css: How to add blank space under a sprint element

    How to implement multi piece page background that is behind a content background in HTML/CSS without Javascript?

    How to refer to css file in codeigniter?

    How to change floating div's width to fill all the space they occupy?

    How to neaten css shapes?

    How to detect the form is blank or not by jQuery

    How to place my dropdown CSS menu bar on top of my jQuery picture rotator?

    How to do mutiple css class in one line javascript code

    How to make triangle section separator [closed]

    how to set the css left property of a class on the basis of an ID of a tag

    How is margin-top and margin-bottom getting added

    How to draw scalable rectangles Ruby on Rails

    How to hide a parent div if an inner div has a certain class, with javascript

    How do I add a placeholder for vertical scrollbar with twitter bootstrap 2.0?

    How can I print a full gridview area via a custom print window?

    How to add Bootstrap to Fullpage.js

    How to make css border like this? [closed]

    How to remove rounded from to select query in jquery?

    how to place image on image?

    How to make commandeButon to vertical align?

    CSS border shape - how to cut off rectangle right upper corner [duplicate]

    How to change the css color code permanent using php