調整爲始終適合瀏覽器的背景視頻

我正在嘗試創建一個網站，其中背景是視頻。我一直在尋找關於如何重新創建Spotify's主頁背景的日子，但似乎無法使其工作。調整爲始終適合瀏覽器的背景視頻

我的問題是，我可以使用瀏覽器或寬度來調整高度，但不能同時使用兩者。與Spotify網站上的視頻不同，它不能隨時擴展以適應瀏覽器。我嘗試了很多東西，其中大部分我都記不起來了。我不介意使用JQuery來實現這種效果。

我當前的代碼是：

<!DOCTYPE html> 
<html> 
<head> 
<title>VideoBG</title> 
<style type="text/css"> 


#videohome { 
    position:absolute; 
    height: 100%; 
    width: 100%; 

    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

</style> 
</head> 
<body> 


     <video id="videohome" preload="auto" autoplay="true" loop="loop" muted="" volume="0"> 
      <source src="./homepage.mp4" type="video/mp4" /> 
     </video> 


</body> 
</html>

來源

2013-05-22 Lateral

看看jQuery的BigVideo.js插件：http://dfcb.github.io/BigVideo.js/ – reinder

我在Spotify的主頁上看不到任何視頻，只有某種視差滾動。 – LeBen

@LeBen：只有當您第一次訪問他們的網站時纔會發生這種情況。他指的是這個特定的頁面：https://www.spotify.com/en/video-splash – reinder

你需要有一個div容器，其適合於屏幕，然後添加一個類視頻將調整它的寬度或高度。

CSS：

.container { 
width: 100%; 
height: 100%; 
position: absolute; 
padding:0; 
margin:0; 
left: 0px; 
top: 0px; 
z-index: -1000; 
overflow:hidden; 
} 

.videoPlayer { 
    min-height: 100%; 
    //min-width:100%; - if fit to width 
position:absolute; 
bottom:0; 
left:0; 
}

HTML：

<div class="container"><video class="videoPlayer">Code goes here</video></div>

來源

2013-05-22 09:22:32 cutoverRooster

過時的歌曲，但一個戈爾迪。自己一直在苦苦掙扎，但發現縱橫比媒體查詢很好地完成了這項工作。

如果不支持媒體查詢，視頻仍會覆蓋該頁面，但無法正確縮放。

如果translateX,translateY或@supports不支持，視頻將不會居中。

HTML：

<div class="cover"> 

    <video autoplay loop mute poster="path/to/image.jpg"> 
     <source src="path/to/video.mp4" type="video/mp4" /> 
     <source src="path/to/video.webm" type="video/webm" /> 
     <source src="path/to/video.ogv" type="video/ogg" /> 
     <img src="path/to/image.jpg" alt="" /> 
    </video> 

</div>

CSS：

.cover { 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 1; 
} 

.cover img, .cover video { 
    display: block; 
    height: auto; 
    left: auto; 
    max-width: none; 
    min-height: 100%; 
    min-width: 100%; 
    right: auto; 
    position: absolute; 
    top: 0; 
    width: auto; 
    z-index: 1; 
} 

@supports (transform: translateX(-50%)) { 

    .cover img, .cover video { 
     left: 50%; 
     top: 50%; 
     transform: translateX(-50%) translateY(-50%); 
    } 

} 

@media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */ 

    .cover img, .cover video { 
     max-width: 100vw; 
     min-width: 100vw; 
     width: 100vw; 
    } 

} 

@media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */ 

    .cover img, .cover video { 
     height: 100vh; 
     max-height: 100vh; 
     min-height: 100vh; 
    } 

}

來源

2017-10-27 12:50:35 shakyjake

我發現這一點：

http://wesbos.com/css-object-fit/

使用對象的配合：蓋;在您的視頻標籤

它爲我工作。

來源

2018-01-04 22:06:52

應該指出的是，截至本文撰寫時Edge尚未完全支持對象適合。它只支持在標籤上使用它。 https://caniuse.com/#search=objectfit –

根據以上評論，對象適合適用於所有瀏覽器中的視頻，IE和Edge除外。你可以在這裏的微軟開發者論壇上投票贊成： https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/32011258-object-fit-and-object-position-for- all-media-elem？category_id = 86947在此期間使用JS polyfill，但如果獲得更多投票，它將被實施。 –

調整爲始終適合瀏覽器的背景視頻

回答

相關問題