使用CSS可以在網(wǎng)頁(yè)中添加視頻，還可以使用width或max-width屬性來(lái)為視頻播放器屏幕大小自動(dòng)調(diào)整比例。實(shí)現(xiàn)可以在不同大小的屏幕上顯示視頻，并提供更好的用戶(hù)體驗(yàn)。
一、在網(wǎng)頁(yè)中添加視頻
可以在網(wǎng)頁(yè)中添加視頻。以下實(shí)例視頻根據(jù) div 區(qū)域大小自動(dòng)調(diào)整并占滿(mǎn)整個(gè) div 區(qū)域：
video {
width: 100%;
height: auto;}
二、width屬性
例如把width 屬性設(shè)置為 100%，視頻播放器會(huì)根據(jù)屏幕大小自動(dòng)調(diào)整比例：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video width="400" controls>
<source src="視頻地址" type="video/mp4">
<source src="視頻地址" type="video/ogg">
您的瀏覽器不支持HTML5視頻。
</video>
<p>調(diào)整瀏覽器窗口大小查看視頻播放器變化</p>
</body>
</html>
三、max-width屬性
因?yàn)橐曨l播放器根據(jù)屏幕大小自動(dòng)調(diào)整比例，且可以比原始尺寸大，因此大多數(shù)情況下可以使用max-width 屬性來(lái)替代。
例如把 max-width 屬性設(shè)置為 100%, 視頻播放器會(huì)根據(jù)屏幕自動(dòng)調(diào)整比例，但不會(huì)超過(guò)其原始大小：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<video width="400" controls>
<source src="視頻地址" type="video/mp4">
<source src="視頻地址" type="video/ogg">
您的瀏覽器不支持HTML5視頻。
</video>
<p>調(diào)整瀏覽器窗口大小，在寬度小于 400px 時(shí)，查看視頻播放器的變化。</p>
</body>
</html>
