0

我有一个视频和该视频的容器。但是,我无法让容器完全包裹视频。我已将约束器背景设为白色,以清楚地显示它太大的地方。我需要正确包装的原因是因为我有一组视频控件,现在位于包装结束的视频下方。在此处输入图像描述

这是我写的 CSS,我尝试了很多东西,但我就是想不通:

#video_container{
    -webkit-box-flex: 1; 
    -moz-box-flex: 1;
    border:2px solid blue;
    margin: 20px;
    padding: 0px;
    width:100%;
    height:100%;
    position: relative;
    background-color:white;
}
#video_container video{
    width:100%;
    height:auto;
    padding: 0px;
    margin: 0px;
}
#video_container:hover #controls {
    opacity: 0.7;
    padding: 0px;
    margin: 0px;
}

这是容器的 HTML:

<div id="video_container">
    <video id="trailers">
        <source src="vLast.mp4" type="video/mp4">
        <source src="vLast.webm" type="video/webm">
    </video>
    <nav>
       <div id="controls">
            <button id="playButton">Play</button>      
            <div id="defaultBar">
                <div id="progressBar"></div>
            </div>
            <button id="vol" onclick="level()">Vol</button>
            <button id="mute">Mute</button>
            <button id="full" onclick="toggleFullScreen()">Full</button>
        </div> 
       <div id="playlist">
            <div>cats</div>
            <div>cats</div>
            <div>cats</div>
        </div>
    </nav>
</div>
4

1 回答 1

0

在视频元素上添加 display:block :

    #video_container video{
        width:100%;
        height:auto;
        padding: 0px;
        margin: 0px;
        display:block;
 }
于 2013-02-10T01:42:42.820 回答