1

我正在尝试获取一个 HTML5 视频来填充父容器宽度，同时与响应式设计保持相同的高度。我只是隐藏任何溢出。我发现 stackoverflow 上的 JavaScript 有时可以完美运行，而其他时候则根本无法正常运行。为什么如果我刷新页面我会得到不同的结果？

   var sxsw = {
full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {
    // Calculate new height and width…
    var initW = imgWidth;
    var initH = imgHeight;
    var ratio = initH / initW;
    imgWidth = boxWidth;
    imgHeight = boxWidth * ratio;
    // If the video is not the right height, then make it so…
    if (imgHeight < boxHeight) {
        imgHeight = boxHeight;
        imgWidth = imgHeight / ratio;
    }
    //  Return new size for video
    return {
        width: imgWidth,
        height: imgHeight
    };
},
init: function() {
    var browserHeight = Math.round(jQuery('.vid-container').height());
    var browserWidth = Math.round(jQuery('vid-container').width());
    var videoHeight = $('#fullscreen_video').height();
    var videoWidth = $('#fullscreen_video').width();
    var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
    $('#fullscreen_video').width(new_size.width).height(new_size.height);
}
};
jQuery(document).ready(function($) {
sxsw.init();
$(window).resize(function() {
    var browserHeight = Math.round($(window).height());
    var browserWidth = Math.round($(window).width());
    var videoHeight = $('#fullscreen_video').height();
    var videoWidth = $('#fullscreen_video').width();
    var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
    $('#fullscreen_video').width(new_size.width).height(new_size.height);
});
})
4

0 回答 0