僅適用於HTML5視頻背景的位置：固定;不過，我不希望它與頁

所以滾動，我有這樣的事情，一個體面的有點反應HTML5背景：僅適用於HTML5視頻背景的位置：固定;不過，我不希望它與頁

<style> 
.video { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    transform: translateX(-50%) translateY(-50%); 
    -webkit-filter: blur(3px); //change the value according to what suits the best 
    -moz-filter: blur(3px); //change the value according to what suits the best 
    -o-filter: blur(3px); //change the value according to what suits the best 
    -ms-filter: blur(3px); //change the value according to what suits the best 
    filter: blur(3px); //change the value according to what suits the best 

    overflow: hidden; 
} 

.margin { 
    margin-top: 400px; 
} 

</style> 
<video id="my-video" class="video" muted loop autoplay> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"><!-- 
    <source src="media/demo.ogv" type="video/ogg"> 
    <source src="media/demo.webm" type="video/webm"> --> 
</video> 
<h1 class="margin"> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1><h1> Some Content</h1><h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1><h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1> 
<h1> Some Content</h1>

所以，我的問題是，如果我改變位置：固定位置：絕對，它將變成無響應。但是，我不希望視頻滾動頁面... 怎麼辦？其他職位如position：static是一團糟。

如果您從固定位置更改位置，則可以在較小的屏幕尺寸上看到垂直滾動條。

編輯：如果您將其佈局/視圖更改爲「正確」，則此問題僅在codepen上可見，因此HTML/CSS/Java框位於右側，預覽位於左側（而非最初頂部和底部佈局）。奇怪的。

來源

2015-08-15 lastnoob

你是什麼意思的響應？ –

檢查codepen。改變位置：固定;定位：絕對;您可以在調整窗口大小時看到水平滾動條。 – lastnoob

不在我的瀏覽器中^^，您使用哪個瀏覽器？ –

與其試圖完成自己創建響應式視頻元素的所有繁重工作，不如使用FitVids.js插件爲您完成，它完全符合您的需求。

來源

2015-08-15 11:27:55 leaksterrr

僅適用於HTML5視頻背景的位置：固定;不過，我不希望它與頁

回答

相關問題