video.js的fluid模式是实现视频响应式布局的常用配置，开启后视频会按照固定宽高比随容器宽度自动缩放，适配不同设备的屏幕尺寸。但在实际开发中，部分场景下需要限制视频的最大高度，避免视频在宽屏设备上过度拉伸，影响页面其他内容的展示。
fluid模式的基本特性
开启video.js的fluid模式后，播放器容器会设置width:100%和对应的padding-top来维持宽高比，视频元素会填满整个容器。默认情况下该模式没有高度上限，容器宽度越大，视频高度就越高。要限制最大高度，我们可以从样式和配置两个方向入手。
方案一：通过CSS样式限制最大高度
这是最简单直接的方式，直接给video.js的播放器容器或者内部视频元素添加最大高度限制即可。首先需要明确video.js生成的DOM结构，播放器最外层容器的类名默认是video-js，内部视频元素包裹在vjs-tech类的容器中。
限制播放器容器最大高度
给播放器外层容器设置max-height，同时需要调整overflow属性避免内容溢出。
/* 限制video.js播放器容器最大高度为500px */
.video-js {
max-height: 500px;
overflow: hidden;
}
/* 让内部视频元素高度填满容器，同时不超过容器高度 */
.video-js .vjs-tech {
height: 100% !important;
width: auto !important;
max-height: 500px;
}
仅限制视频元素最大高度
如果不想限制整个播放器容器的高度，也可以只给视频元素本身设置最大高度，这种方式不会影响播放器控制栏等组件的布局。
/* 仅限制视频元素的最大高度 */
.video-js .vjs-tech {
max-height: 500px;
width: auto !important;
}
方案二：通过JS动态计算限制高度
如果需要根据页面其他元素的高度动态调整视频最大高度，或者需要在不同场景下切换最大高度限制，可以使用JS来实现。核心思路是监听窗口尺寸变化，计算当前需要的最大高度，然后动态设置播放器容器的样式。
// 初始化video.js播放器
var player = videojs('my-video', {
fluid: true, // 开启fluid模式
controls: true,
sources: [{
src: 'https://ipipp.com/video/sample.mp4',
type: 'video/mp4'
}]
});
// 定义设置视频最大高度的函数
function setVideoMaxHeight() {
// 这里可以根据实际需求计算最大高度，比如取窗口高度的70%
var maxHeight = window.innerHeight * 0.7;
// 获取播放器容器
var playerEl = document.querySelector('.video-js');
if (playerEl) {
playerEl.style.maxHeight = maxHeight + 'px';
// 同时设置内部视频元素的最大高度
var techEl = playerEl.querySelector('.vjs-tech');
if (techEl) {
techEl.style.maxHeight = maxHeight + 'px';
techEl.style.width = 'auto';
}
}
}
// 初始调用一次
setVideoMaxHeight();
// 监听窗口尺寸变化，重新计算高度
window.addEventListener('resize', setVideoMaxHeight);
两种方案的对比
我们可以通过下面的表格对比两种方案的适用场景：
| 方案 | 实现复杂度 | 适用场景 | 注意事项 |
|---|---|---|---|
| CSS样式限制 | 低 | 固定最大高度，不需要动态调整的场景 | 需要注意样式优先级，必要时添加!important覆盖默认样式 |
| JS动态计算 | 中等 | 需要根据页面布局动态调整最大高度，或者需要切换限制规则的场景 | 需要监听resize事件，避免频繁触发导致性能问题，可以加防抖处理 |
注意事项
- 设置最大高度后，视频的宽高比可能会被打破，建议同时设置视频元素的
width:auto，让宽度自动适配高度，避免视频变形。 - 如果页面中存在多个video.js播放器实例，需要将选择器调整为对应播放器的容器类名或者id，避免样式互相影响。
- fluid模式下播放器的
padding-top是根据宽高比自动计算的，设置最大高度后如果容器宽度过大，可能会出现上下留白的情况，这是正常现象，属于高度限制后的必然结果。
如果需要在限制最大高度的同时保持视频居中显示，可以给播放器容器添加display:flex;justify-content:center;align-items:center;的样式，让视频在容器内居中排列。