HTML5視頻的背景 - 需要幫助大小調整窗口大小

Question

我一直對這個整天但即使我所有的google搜索，我還沒有想通了。

基本上我想有作爲相同效果www.tesla.com

視頻是全尺寸，但調整大小根據窗口的大小，並在同一時間作物有點但保持視頻居中（在Tesla網站上試用它很棒）。如果它變得太小，它會顯示一個圖像（用於移動）。

我跑在網站上傑基爾主題，GitHub的網頁：https://alanlemoine.github.io/personal

我的問題：

• 在我的13" 屏幕，視頻太大和垂直滾動條 出現我想讓它適合窗口，沒有滾動條 即使它在底部播放視頻（有些東西用「overflow： hidden」我想？）
• 當r調整窗口，整個視頻都調整大小。我想 有它調整喜歡www.tesla.com它作物，但一直 它爲中心。
• 我不希望視頻完全全屏。我需要頂部的 導航欄。所以在DIV中更好。

你能幫忙嗎？

非常感謝你提前。

以下是我有：

/* Default hide the video on all devices */ 
 

 
#video { 
 
    display: none 
 
} 
 

 

 
/* Default display the image to replace the video on all devices */ 
 

 
#videosubstitute { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    max-width: 100% 
 
} 
 

 

 
/* Medium Devices, Desktops */ 
 

 
@media only screen and (min-width: 992px) { 
 
    #video { 
 
    display: block 
 
    } 
 
    #videosubstitute { 
 
    display: none 
 
    } 
 
} 
 

 
#videoDiv { 
 
    width: 100%; 
 
    height: 360px; 
 
    position: relative; 
 
} 
 

 
#videoBlock, 
 
#videoMessage { 
 
    width: 100%; 
 
    height: 360px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#video { 
 
    width: 100%; 
 
} 
 

 
#videoMessage { 
 
    padding: 0.4em; 
 
    margin: 0; 
 
} 
 

 
#videoMessage { 
 
    color: white; 
 
    z-index: 99; 
 
} 
 

 
#videoMessage h1 { 
 
    font-size: 3em; 
 
    color: #ffffff; 
 
    text-align: center; 
 
}

<div id="videoDiv"> 
 
    <div id="videoBlock"> 
 
    <div><img src="http://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="" width="800"></div> 
 
    <video preload="preload" id="video" autoplay="autoplay" loop="loop"> 
 
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"></source> 
 
</video> 
 
    <div id="videoMessage"> 
 
     <h1>Hello world</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

這是一個相對簡單的技巧，你可以用HTML 5和CSS的一些做。

首先，你需要絕對定位您的視頻元素，並隱藏其溢出。然後你將使它成爲頁面寬度和高度的100％。

接下來，您將基本舒展基於視頻的屏幕寬高比裁剪。有一個叫做對象適合的漂亮的東西，你也可以寫成對象適合：封面，它會給你相同的效果，但它還不被IE支持，所以如果你決定使用它，你將需要兩者。

我已經包含在你的解決方案一個codepen。 http://codepen.io/DrkDevil/pen/OpXxZV/

<nav>your navigation goes here.</nav> 
<div class="flexCon" > 
    <div id="videoMessage"> 
    <h1>Hello world</h1> 
    </div> 
</div> 
<div id="videoBg"> 
    <video loop muted autoplay poster="img/videoframe.jpg"> 
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"> 
    </video> 
</div> 
<style> 
#videoBg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;} 
#videoBg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
@media (min-aspect-ratio: 16/9) { #videoBg > video { height: 300%; top: -100%; }} 
@media (max-aspect-ratio: 16/9) { #videoBg > video { width: 300%; left: -100%; }} 
@supports (object-fit: cover) {#videoBg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }} 

/* Demo Classes */ 
nav { position:fixed; width:100%; top:0; left:0; padding:20px; background:#fff; z-index:2;} 
/* Center content with flexbox container */ 
.flexCon { height: 100vh; display: flex; justify-content: center; align-items: center; } 
/* Position the content relative to the flex container */ 
#videoMessage { z-index:1; position:relative; } 
</style> 

這裏是如何可以實現你更深入的找什麼一個非常好的explination。

https://fvsch.com/code/video-background/