下面的页面显示了一个缩略图，当点击该缩略图时，会调出带有视频的Bootstrap 3模式.它可以工作，但如果视频对于窗口来说太高，它会延伸到窗口下方，用户无法看到整个视频(并且必须滚动).我try 了各种调整大小的策略，但似乎都不管用.非常感谢您的建议.URL被遮挡，抱歉.我被要求使用Bootstrap 3.
<!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">
</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" style="margin-top:50px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">
×
</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); // Button that triggered the modal
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', '{}');
// Create a new source tag
var sourceTag = document.createElement('source');
sourceTag.setAttribute('src', videoSrc);
sourceTag.setAttribute('type', 'video/mp4');
// Append the source tag to the video tag
videoTag.appendChild(sourceTag);
// Get the modal body and clear its contents
var modalBody = document.getElementById('viewVideoBody');
modalBody.innerHTML = '';
// Append the video tag to the modal body
modalBody.appendChild(videoTag);
// Initialize the video player
player = videojs(videoTag);
});
</script>
</body>
</html>