如何製作自定義高度視頻容器並在該容器頂部製作內容

我想爲特定的div容器製作自定義高度視頻背景，並在其上顯示標題，段落等內容... 何時我保持100％的高度，視頻工作得很好，但是當我嘗試調整高度時，寬度也會減小。如何製作自定義高度視頻容器並在該容器頂部製作內容

如何以500像素的高度進行視頻顯示，並將寬度保持爲全角...並顯示視頻中心標題的小段落。

video#videobg { 
 
    position: relative; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: 100%; 
 
    height: 500px; 
 
    
 
}

<div class="container"> 
 

 
    <video autoplay poster="Cheer-Up.jpg" id="videobg" loop> 
 
    <div><p>Something here</p></div> 
 
    <source src="Cheer-Up.webm" type="video/webm"> 
 
     <source src="Cheer-Up.mp4" type="video/mp4"> 
 
     Your browser does not support the video tag. I suggest you upgrade your browser. 
 
    </video> 
 
</div>

來源

2016-10-06 cheesyblast

嘗試使用CSS來設置視頻容器特定的高度，但也設置你希望它留寬度。把它放在你的標題中。

<style> 
    #videobg { 
     height: <PUT YOUR HEIGHT HERE>; 
     width: <PUT YOUR WIDTH HERE>; 
    } 
</style>

此外，把寬度放在一個特定的像素數。 100％可能會根據身高而改變。

來源

2016-10-06 03:13:12 Trevader2413

設置自定義寬度不起作用，如果它工作，我不認爲它看起來不錯，當我減少窗口的大小，視頻的一部分被切割到另一邊...也許在不同的屏幕尺寸.... – cheesyblast

看着W3學校頁面（一個很好的資源開始網頁設計），放棄CSS和改變HTML視頻標籤，以包括寬度屬性，如下所示：

不，我的朋友..它不工作。視頻只是不斷調整大小，我試圖改變寬度或高度..前。如果我將寬度設置爲1800px，並將高度設置爲300 px ..整個視頻會更改爲600px的寬度...我的意思是一個取決於另一個...如何更改位置和顯示屬性...再次感謝幫助。 – cheesyblast

如何製作自定義高度視頻容器並在該容器頂部製作內容

回答

相關問題