漿紗視頻是瀏覽器窗口背景

Question

我的視頻的尺寸是1280×720。

我想知道是否有可能拉伸視頻，這樣它會配合到我的瀏覽器或其他瀏覽器的尺寸根據在縱橫比上。

我使用視頻標籤在我的頁面背景上放置視頻。我目前在後臺播放視頻，但我不知道如何適當調整大小。

我會提供的jsfiddle，但我不知道如何上傳我的本地視頻來測試重現這種情況

Answer 1

我希望這是你在找什麼...

CSS

#video-bg { 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    overflow: hidden; 
} 
#video-bg > video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
/* 1. No object-fit support: */ 
@media (min-aspect-ratio: 16/9) { 
    #video-bg > video { height: 300%; top: -100%; } 
} 
@media (max-aspect-ratio: 16/9) { 
    #video-bg > video { width: 300%; left: -100%; } 
} 
/* 2. If supporting object-fit, overriding (1): */ 
    @supports (object-fit: cover) { 
    #video-bg > video { 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    object-fit: cover; 
} 
} 

HTML

<div id="video-bg"> 
    <video controls loop> 
    <source type="video/mp4" src="video.mp4"> 
    <source type="video/webm" src="video.webm"> 
    </video> 
</div> 

jsfiddle demo