視頻是可以按比例縮放顯示的,現在大部分視頻的寬度與高度比例是16:9,我們可以通過CSS將視頻按照這個比例進行縮放顯示。文章來源:http://www.zghlxwxcb.cn/news/detail-541292.html
通過百分比設置寬度,根據寬高比16:9,計算出高度的百分比數值,設置內邊距為高度的數值,最后用絕對定位把視頻百分百填充到設置的區(qū)域里面文章來源地址http://www.zghlxwxcb.cn/news/detail-541292.html
<style>
.video-box {
? ? padding-bottom: 56.25%;
? ? width: 100%;
? ? position: relative;
}
.video-box video {
? ? width: 100%;
? ? height: 100%;
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? object-fit: cover;
}
</style>
<div class="video-box">
?? ?<video src="video.mp4"></video>
</div>
到了這里,關于HTML VIDEO視頻標簽高度自適的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!