视频100％的宽度和高度220px

Question

我有一个视频，我希望它的宽度整整100％，高度

<video controls="controls"> 
    <source src="video/sport.m4v" type="video/mp4" /> 
    <source src="video/sport.ogg" type="video/ogg" /> 
    <source src="video/sport.flv" type="video/flv" /> 

但问题的220px当我改变高度220px也宽度改变以及

video { 
width: 100% !important; 
height:220px !important; 
} 

Answer 1

如果你硬是给它100％的宽度和220px您的视频可能会显得非常捉襟见肘的高度，水平。一个更好的想法是将视频包含在一个容器div中，该容器div具有您想要的尺寸的溢出隐藏集。例如：

<div id="container"> 
    <video controls="controls"> 
    <source src="video/sport.m4v" type="video/mp4" /> 
    <source src="video/sport.ogg" type="video/ogg" /> 
    <source src="video/sport.flv" type="video/flv" /> 
</div> 

video{ 
    width: 100%; 
} 
#container{ 
    width: 100%; 
    height: 220px; 
    overflow: hidden; 
} 

这样，视频将具有正常的宽高比，但将具有正确的宽度。然后，包含的div只是隐藏视频的任何部分高度超过220px。