在網頁中嵌入視頻時，經常會為video標簽添加寬高，給視頻預留一定的空間。給視頻設置寬高屬性后，瀏覽器在加載頁面時就會預先確定視頻的尺寸，為視頻保留合適大小的空間，保證頁面布局的統一。為video標簽添加寬、高的方法十分簡單，可以運用width和height屬性直接為video標簽設置寬高。示例代碼如下。

占位色塊

瀏覽器不支持video標簽

占位色塊

運行示例代碼，效果如圖1所示。

圖1 定義視頻寬高

此時如果更改示例中的代碼，刪除視頻的寬度和高度屬性，修改后的代碼如下：

video{

background:#F90;

float:left;

}

保存HTML文件，刷新頁面，效果如圖2所示。

圖2 刪除視頻寬高

從圖2可以看出，視頻和其中一個灰色文本模塊被擠到了大盒子下面。這是因為未定義視頻寬度和高度時，視頻會按原始大小顯示，此時瀏覽器因為沒有辦法控制視頻尺寸，只能按照視頻默認尺寸加載視頻，從而導致頁面布局混亂。

注意：

通過width和height屬性來縮放視頻，這樣的視頻即使在頁面上看起來很小，但它的原始大小依然沒變，因此在實際工作中要運用視頻處理軟件(如“格式工廠”)對視頻進行壓縮。

猜你喜歡：

總結

以上是生活随笔為你收集整理的html 设置视频尺寸,如何使用CSS控制视频的宽高？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。