将HTML5视频填充到容器中

Question

我正在尝试使用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);
});
})