在全屏调整高度时如何保持视频播放器的响应

Question

我在页面内有一个全屏视频播放器，只有当我拖动浏览器的角或左右边缘时它才会响应，如果我尝试使用向上移动的浏览器底部边缘来调整大小，它不会响应。如果我尝试向上调整大小，它只会切断视频，因为我隐藏了溢出，或者如果我没有隐藏溢出，它会显示滚动条。我希望我可以显示黑色间距，但保持播放器底部可见，这样我就可以在播放器中看到工具栏。无论我如何调整浏览器大小，保持响应的最佳方式是什么？

<div class="video-player-page">
    <div class="row">
        <div>
            <!-- video player here -->
            <div id="video-player"></div>
        </div>
    </div>
</div>

Answer 1

应该这样做。

<script>
    $(document).ready(function () {
        var video_w = $('#video_w');
        var videoRatio = 1.77;
        var windowRatio = 1.6; //this is width to height ratio of video.
        $(window).resize(function () {
            setVideoHeight();
        });
        function setVideoHeight() {
            windowRatio = $(window).width() / $(window).height();
            video_w.addClass('resized');
            if (windowRatio < videoRatio) {
                video_w.width($(window).width());
                video_w.height(video_w.width() / videoRatio);
            }
            else {

                video_w.height($(window).height());
                video_w.width(video_w.height().videoRatio);
            }
        }
    });
</script>
<style>
    #video_w video {
        width: 100%;
    }

    #video_w.resized video {
        width: 100% !important;
        height: 100% !important;
    }

    .row_video {
        margin: 0;
    }
</style>

html 标记

<div id="video_w">
            <video controls="controls">
                <source src="big_buck_bunny.mp4" type="video/mp4" />
            </video>
        </div>

在全屏调整高度时如何保持视频播放器的响应

How can I keep video player responsive when resizing height in full screen

html

css

jquery

html5-video

responsive-design