Bootstrap 3 Modal结合video.js视频无法自适应窗口尺寸求助

针对你遇到的视频在Bootstrap 3模态框中超出窗口高度、无法完整查看的问题，可以通过以下几步调整解决：

1. 添加自定义样式限制模态框尺寸 #

在<head>中添加以下CSS，强制模态框适配窗口高度，同时让内容区域可滚动：

<style>
/* 调整模态框容器，限制最大高度并垂直居中 */
#viewVideoModal .modal-dialog {
  max-width: 90%;
  max-height: 90vh;
  margin: 5vh auto;
  display: flex;
  align-items: center;
}

/* 让模态框内容区域垂直拉伸 */
#viewVideoModal .modal-content {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 让模态框主体区域可滚动，去除默认内边距避免视频裁剪 */
#viewVideoModal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* 限制视频播放器最大高度，适配模态框剩余空间 */
#viewVideoModal .video-js {
  width: 100%;
  height: auto;
  max-height: calc(90vh - 60px); /* 减去头部高度，避免超出 */
}
</style>

2. 优化模态框结构 #

移除modal-dialog上的内联样式style="margin-top:50px;"，改用CSS统一控制，避免冲突。

3. 完善播放器销毁逻辑（可选但推荐） #

在模态框关闭时销毁Video.js播放器，避免内存泄漏和重复初始化问题，在原脚本末尾添加：

$('#viewVideoModal').on('hidden.bs.modal', function () {
  if (player) {
    player.dispose();
    player = null;
  }
});

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
        <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet">
        <style>
            #viewVideoModal .modal-dialog {
                max-width: 90%;
                max-height: 90vh;
                margin: 5vh auto;
                display: flex;
                align-items: center;
            }

            #viewVideoModal .modal-content {
                max-height: 100%;
                display: flex;
                flex-direction: column;
            }

            #viewVideoModal .modal-body {
                flex: 1;
                overflow-y: auto;
                padding: 0;
            }

            #viewVideoModal .video-js {
                width: 100%;
                height: auto;
                max-height: calc(90vh - 60px);
            }
        </style>
    </head>
    <body>
        <a href="#" data-toggle="modal" data-target="#viewVideoModal" data-video-url="https://VIDEOFILE" class="video-link">
            <img id="img-401" src="https://VIDEOFILE?thumb=1" height="280" width="157">
        </a>
        <div class="modal fade" id="viewVideoModal" tabindex="-1" role="dialog" aria-labelledby="viewVideoModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">
                                &times;
                            </span>
                            <span class="sr-only">
                                Close
                            </span>
                        </button>
                    </div>
                    <div class="modal-body" id="viewVideoBody"></div>
                </div>
            </div>
        </div>
        <script>
            var player;
            $('#viewVideoModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var videoSrc = button.data('video-url');
                var videoTag = document.createElement('video');
                videoTag.setAttribute('class', 'video-js vjs-fluid center-block vjs-default-skin');
                videoTag.setAttribute('controls', '');
                videoTag.setAttribute('preload', 'auto');
                videoTag.setAttribute('data-setup', '{}');

                var sourceTag = document.createElement('source');
                sourceTag.setAttribute('src', videoSrc);
                sourceTag.setAttribute('type', 'video/mp4');

                videoTag.appendChild(sourceTag);

                var modalBody = document.getElementById('viewVideoBody');
                modalBody.innerHTML = '';
                modalBody.appendChild(videoTag);

                player = videojs(videoTag);
            });

            // 关闭模态框时销毁播放器
            $('#viewVideoModal').on('hidden.bs.modal', function () {
                if (player) {
                    player.dispose();
                    player = null;
                }
            });
        </script>
    </body>
</html>

关键说明 #

• 用max-height: 90vh限制模态框最大高度为窗口的90%，留出上下边距避免贴边
• 通过Flex布局让模态框垂直居中，同时让modal-content垂直拉伸，modal-body自动填充剩余空间并支持滚动
• 限制视频播放器的最大高度，确保不会超出模态框可用空间
• 添加播放器销毁逻辑，避免多次打开模态框导致的资源占用问题

内容的提问来源于stack exchange，提问作者Mark Fletcher