需要调整CSS的HTML5视频的大小

我有这个example。所有我需要它使视频height:600px;而不是固定的位置，我只想在我的网站的第一部分，当我试图改变位置和高度的视频变得更小，我应该包装它div什么的？需要调整CSS的HTML5视频的大小

的HTML：

<div id="bg"> 
<video src="video/video.mp4" id="bg-video" muted autoplay loop ></video> 
</div>

的CSS：

#bg { 
    position: static; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 

#bg video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
    filter: blur(3px); 
    -webkit-filter: blur(3px); 
}

来源

2014-02-25 Mohamed Samy

-1

它在我脑海中最简单的办法是

HTML：

<body> 
    <div id="bg"> 
    <div class="wrapper"> 
     <video src="video/video.mp4" id="bg-video" muted="" autoplay="" loop=""></video> 
    </div> 
    </div> 
</body>

CSS：

#bg .wrapper { 
    height: 600px; 
    /* those two are only to center the video horizontally*/ 
    width: 1067px; 
    margin: 0 auto; 
}

所以，你可以删除样式#bg和#bg video

来源

2014-02-25 14:52:02 h4cky

对不起@ h4cky，无法正常工作：S –

它没有达到预期的效果或什么？检查了这一点 - http://jsfiddle.net/8z2vV/ – h4cky

首先，使顶部的视频留在你的页面，你将不得不改变包装div的位置绝对。

然后，您还必须调整当前的相对高度（200％）并将其设置为固定的600像素。为了让您的视频完全填充div的600像素，请将视频高度设置为100％（或者也可以设为600像素）。您可能还想从视频的div或边距中移除任何填充。

请注意，使用此代码，您的视频仍将具有相对宽度！只需将我对高度所做的更改应用于这些事情。

#bg { 
position: absolute; 
top: 0px; 
left: -50%; 
width: 200%; 
height: 600px; 
padding: 0px; 
} 

#bg video { 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: 0 auto; 
min-width: 50%; 
height: 100%; 
filter: blur(3px); 
-webkit-filter: blur(3px); 
}

来源

2014-02-25 14:55:04

需要调整CSS的HTML5视频的大小

回答

相关问题