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

占位色塊

瀏覽器不支持video標(biāo)簽

占位色塊

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

圖1 定義視頻寬高

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

video{

background:#F90;

float:left;

}

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

圖2 刪除視頻寬高

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

注意：

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

猜你喜歡：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。