HTML背景視頻調整爲響應的屏幕大小

我有關於我的HTML背景視頻的問題。我在Stack Overflow上找到了一些文章，並將它添加到我的HTML和CSS中。但它似乎不起作用，它要麼不會變得敏感，要麼會與我的其他divs和元素混淆。HTML背景視頻調整爲響應的屏幕大小

我有一個畫面：（視頻元素的容器具有背景色黃色）

這裏是代碼：

.container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 
    font-size: 0; 
    background-color: yellow; 
    margin: auto; 
    z-index: -1000; 
} 

.container video { 
    min-width: 100%; 
    min-height: 100%; 

    width: auto; 

    position: absolute; 

    height: auto; 
    max-height: 100%; 
    width: 100%; 
}

正如你所看到的，視頻的寬度做不適應屏幕尺寸。我試過object-fit，但這會使它不能響應。

來源

2017-05-03 Ricardo Hagens

訣竅是讓你的容器height: 0然後在容器上應用視頻的寬高比爲padding-bottom。通過將高度除以寬度並乘以100得到百分比值，即可得到視頻的寬高比。然後定位您的視頻以佔據容器中的整個空間。

我的例子中的視頻是320x176。（176/320）* 100 = 55％。

* {margin:0;} 
 
.container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 0; 
 
    overflow: hidden; 
 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 
 
    font-size: 0; 
 
    background-color: yellow; 
 
    margin: auto; 
 
    z-index: -1000; 
 
    padding-bottom: 55%; 
 
} 
 

 
.container video { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay></video> 
 
</div>

來源

2017-05-03 17:37:27

嘿，謝謝你的回覆。我試過了，但它一直在左邊和右邊顯示容器背景（黃色）。我玩過，並做了這樣的伎倆，它給我的視頻一個css規則的對象適合：填充; –

@RicardoHagens按照你的意願做我的演示工作嗎？ 'object-fit'非常棒，但它的瀏覽器支持非常差。 –

如果您希望視頻總是充滿100％的寬度和你的容器，無論比100％的高度，那麼你應該用overflow:hidden去，且位置上面玩，如果要將其居中，則使用右側，底部，左側屬性。

.container .video{ 
    min-width:100%; 
    min-height:100%; 
    overflow:hidden; 
}

來源

2017-05-03 17:40:33

這奏效了，我什麼，我需要的用於臺式機至少：

.container{ 
    width: auto; 
    height: 100%; 
    position: absolute; 

    bottom: 0px; 
    top: 0px; 
    background-color: yellow; 
    z-index: -1000; 
    overflow: hidden; 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 

    margin: auto; 

    font-size: 0; 
} 


.container video{ 

    min-width: 100%; 
    min-height: 100%; 
    position: static; 
    top: 0; 
    left:0; 
    height: 100%; 
    width: 100%; 
    object-fit: fill; 

    }

移動我會給它一個不同的規則，因爲現在更改視頻寬高比（我需要）。

來源

2017-05-03 18:38:25

HTML背景視頻調整爲響應的屏幕大小

回答

相關問題