html5視頻寬度不擴展100％

Question

我不知道這是否可行。 我想在頂部標題部分播放背景視頻（不是正文背景視頻）。我有一個沒有100％擴大的視頻。

另外我想要一個靜態橫幅第一件事，你看到當訪問該網站，然後過渡（某種淡入淡出）的背景視頻。

https://jsfiddle.net/v6oo5eh5/1/

<style> 
    /* The only rule that matters */ 
    #video-background { 
     /* making the video fullscreen */ 
     position:fixed; 
     /* bottom: 0;*/ 
     /* min-width: 100%; 
     min-height: 100%;*/ 
     /*width:auto; 
     height: auto;*/ 
     z-index: -100; 
     left:0; 
     float:left; 
     top:0; 
     width:1920px; 
    } 
</style> 

<video autoplay loop id="video-background" muted style="background:red; height:500px;"> 
    <source src="https://s3.amazonaws.com/clientevents/FIPPUK001-HMNHDF76C7D/video/Fipp_Congress_2.mp4" type="video/mp4" align="left"> 
</video> 

我不知道我怎麼能做到這一點。有沒有任何例子或暗示完成這件事？

感謝。

Answer 1

使用video {object-fit: fill;}填充超出原始尺寸的視頻。

Answer 2

您將高度設置爲500px，因此寬度將設置爲與該高度的比率。如果你刪除高度，它會變成全寬，但是高度也會縮小。

如果您希望高度固定爲500px，您可以添加一個溢出設置爲隱藏的容器，但會丟失部分視頻。

下面是使用jQuery橫幅褪色太

<style> 
    #video-background { 
     /* making the video fullscreen */ 
     position:fixed; 
     z-index: -100; 
     left:0; 
     float:left; 
     top:0; 
     width:1920px; 
     height: 500px; 
     overflow: hidden; 
    } 
    .banner{ 
     position: absolute; 
     top: 0; 
     width: 100%; 
     height: 500px; 
     background: blue; 
    } 
</style> 

<div id="video-background"> 
    <div class="banner"> 
     <h1>Hello World</h1> 
    </div> 
    <video autoplay loop muted style="background:red; width: 100%;"> 
     <source src="https://s3.amazonaws.com/clientevents/FIPPUK001-HMNHDF76C7D/video/Fipp_Congress_2.mp4" type="video/mp4" align="left"> 
    </video> 
</div> 

<script> 
    $(function(){ 
     setTimeout(function(){ 
      $(".banner").fadeOut(); 
     }, 500); 
    }); 
</script> 

Answer 3

請檢查該代碼的例子： - 在這裏

<div id="video-background"> 
<video autoplay loop muted style="background:red; width: 100%;"> 
    <source src="https://s3.amazonaws.com/clientevents/FIPPUK001-HMNHDF76C7D/video/Fipp_Congress_2.mp4" type="video/mp4" align="left"> 
</video> 
</div> 

點擊： - https://jsfiddle.net/v6oo5eh5/2/

Answer 4

max-width: 1920px; 
width: 100%; 
object-fit: cover; 

您可以使用object-fit: cover;，同時設置max-width和width

https://jsfiddle.net/v6oo5eh5/6/