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中的靜音標題視頻

回答

相關問題