html5中的静音标题视频答案

【问题标题】：muted header video in html5html5中的静音标题视频
【发布时间】：2018-02-03 04:32:50
【问题描述】：

我想在标题中添加一个全宽但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);
}

【问题讨论】：

当你改变播放器的比例时，视频应该如何表现？
它应该占据全屏宽度，但有几行高度。 @Huelfe
这意味着你剪掉了视频的一些高度信息，对吧？
是的，这很好@Huelfe
没有-ms-filter 这样的东西。您的视频在 IE 上不会有任何模糊。

标签： css html bootstrap-4

【解决方案1】：

我想这就是你想要的。

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

<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>

【讨论】：

这不尊重视频的纵横比。
他不想
我怎样才能在这个视频上添加一个按钮来引导我到页面的其他部分？ @l.g.karolos

【解决方案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);
}

【讨论】：

不，这不会改变任何事情。