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

Question

I have this example . 我有这个例子。 All I need it make the video height:600px; 我所需要的使视频height:600px; and not fixed position , I just want make it in the first section on my site , when I try to change the position and height the video is become smaller , should i wrap it with div or something ? 而不是固定位置，我只想在网站的第一部分中进行设置，当我尝试更改视频的位置和高度时，它会变小吗，我应该用div或其他东西包裹起来吗？

The HTML : HTML：

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

The CSS : 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);
}

Answer 1

First of all, to make the video stay on top your page you will have to change the position of the wrapping div to absolute. 首先，要使视频停留在页面顶部，您必须将包装div的位置更改为绝对位置。

Then you also have to adjust the currently relative height (200%) and set it to a fixed 600px. 然后，您还必须调整当前相对高度（200％）并将其设置为固定的600px。 To make you video fill exactly the 600px of the div, set the videos height to 100% (or also to 600px). 为了使您的视频精确地充满div的600像素，请将视频高度设置为100％（或也设置为600像素）。 You might also want to remove any padding from the div or margin from the video. 您可能还希望删除div或视频中的空白。

Note that with this code your video will still have a relative width! 请注意，使用此代码，您的视频仍将具有相对宽度！ Just apply the changes I made to the height to those things as well. 只需将我对高度所做的更改也应用于这些东西。

#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);
}

Answer 2

The simplest solution which comes to my mind is 我想到的最简单的解决方案是

HTML: HTML：

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

CSS: CSS：

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

So you can remove the style for #bg and #bg video 因此，您可以删除#bg和#bg video的样式

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

问题描述

2 个解决方案

解决方案1
0 2014-02-25 14:55:04

解决方案2
-1 2014-02-25 14:52:02

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

问题描述

2 个解决方案

解决方案1 0 2014-02-25 14:55:04

解决方案2 -1 2014-02-25 14:52:02

解决方案1
0 2014-02-25 14:55:04

解决方案2
-1 2014-02-25 14:52:02