javascript - 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);
});
})