CSS 3 video element styling

Question

Hello could you please help me with video element styling?

Here is what my html looks like http://jsfiddle.net/SXCmX/2/

html, body {
    height: 100%;
    background-color: gray;
}

body {
    padding: 0;
    margin: 0;
}

#main-content {
    width: 960px;
    background: orange;
    height: 100%;
}

#header {
    background-color: black;
    height: 100px;
}

#video-player-content {
    background-color: green;
}

#video-player {
    background-color: yellow;

}

#control-panel {
    background-color: lightblue;
}

<div id="main-content">
    <header id="header">
    </header>

    <div id="video-player-content">
        <video id="video-player">

        </video>
        <div id="control-panel">
            <button>a</button>
            <button>b</button>
            <button>c</button>
            <button>d</button>
        </div>
    </div>
</div>

1) I would love to remove space between video element and control panel (space under the yellow rectangle) 2) I would also love to center main-content and video-player element

Thank you very much for any kind of help

Best regards Team ol

Answer 1

1). To get rid of space between video and control bar make video element display: block. By default it's inline-block, hence a gap caused by white spaces (line breaks, tabs, etc.)

2). To center video element give it a margin: 0 auto.

#video-player {
    background-color: yellow;
    display: block;
    margin: 0 auto;
}

Demo: http://jsfiddle.net/SXCmX/4/