Question

我想在标题中添加一个宽度为300px高度的静音视频。

我面临的问题是，当我减小视频的高度时，宽度会自动减小，而我希望宽度已满。

以下是HTML代码：

<video id="videobcg" preload="auto"
  autoplay="true" loop="loop" muted="muted" volume="0">
  <source src="http://12982-presscdn-0-38.pagely.netdna-cdn.com/wp-content/uploads/2016/03/2016-web-loop-03.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

这是CSS部分：

#videobcg { 
   position: relative;
   top: 0px;
   left: 0px;
   min-width: 100%;
   min-height: 100%;
   width: 800px;
   height: 380px;
   z-index: -1000;
   overflow: hidden;
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);
}

Answer 1

我认为这就是你想要的。

＆＃13;

#videobcg { 
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   min-height: 50%;
   min-width: 100%;
   max-width: 100%;
   height: 380px;
   z-index: -1000;
   overflow: hidden;
    -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  object-fit: fill;
}

.video-button{
  position:relative;
  z-index:3;
  margin-left:40%;
  margin-top:40%;
}

＆＃13;

<video id="videobcg" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0"> <source
src="http://12982-presscdn-0-38.pagely.netdna-cdn.com/wp-
content/uploads/2016/03/2016-web-loop-03.mp4"
type="video/mp4"> <source src="movie.webm" type="video/webm"> </video>

<div class=video-button>
   <a href="#" class="button">Button</a>
</div>

＆＃13;

Answer 2

你有没有试过这样的事情：

#videobcg { 
   position: relative;
   top: 0px;
   left: 0px;
   width: 100%;
   min-height: 100%;
   max-width: 800px;
   height: 380px;
   z-index: -1000;
   overflow: hidden;
    -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

在html5中静音标题视频

2 个答案: