html5中的静音标题视频

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

我面临的问题是当我降低视频的高度时，宽度会自动降低，而我希望宽度变满。

下面是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); 
}

来源

2017-08-25 i.maddy

应该如何在视频的行为，当您更改播放器的比例是多少？ – Huelfe

它应该采取全屏宽度，但几行高度。 @Huelfe –

这意味着你会剪下一些视频的高度信息，对吧？ – Huelfe

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

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

来源

2017-08-25 07:13:45 Alessio

不会改变任何内容。 –

我想这就是你想要的。

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

来源

2017-08-25 07:18:15

这工作。非常感谢。上帝保佑你的代码 –

这并不尊重视频的宽高比。 –

他不希望 –

html5中的静音标题视频

回答

相关问题