Html CSS 3视频元素样式

你好，你能帮我做视频元素的造型吗

下面是我的html的样子

html，正文{
身高：100%；
背景颜色：灰色；
}
身体{
填充：0；
保证金：0；
}
#主要内容{
宽度：960px；
背景：橙色；
身高：100%；
}
#标题{
背景色：黑色；
高度：100px；
}
#视频播放器内容{
背景颜色：绿色；
}
#视频播放器{
背景颜色：黄色；
}
#控制面板{
背景颜色：浅蓝色；
}
A.
B
C
D

1） 我想删除视频元素和控制面板之间的空间（黄色矩形下的空间） 2） 我也会喜欢中心的主要内容和视频播放器的元素

非常感谢你的帮助

向ol团队致以最诚挚的问候。要消除视频和控制栏之间的空间，请使

video

元素

display:block

。默认情况下，它是

内联块

，因此由空格（换行符、制表符等）引起的间隙

2） 。要使视频元素居中，请给它一个

边距：0 auto

视频播放器{ 背景颜色：黄色； 显示：块； 保证金：0自动； } 演示：

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>