ビデオ背景が境界線付きで、時にはブートストラップにない場合があります。

Question

ビデオ背景を持つブートストラップHTMLページがあります。私の問題は、ビデオに時には左右の境界があり、時には境界がないことがあることです。モバイルデバイスでは、ボタン上に境界線があり、時には境界線もありません。私のブラウザ（ChromeとFirefox）をリフレッシュすると、ビデオは全幅と高さ（まさに私が望むもの）であり、ブラウザを更新した後に再び境界線があります。それはデスクトップ用でもモバイルデバイス用でも起こります。誰か助けてもらえますか？

 // Video Background 
 

 
    /** Document Ready Functions **/ 
 
    /********************************************************************/ 
 

 
    $(document).ready(function() { 
 

 
     // Resive video 
 
     scaleVideoContainer(); 
 

 
     initBannerVideoSize('.video-container .poster img'); 
 
     initBannerVideoSize('.video-container .filter'); 
 
     initBannerVideoSize('.video-container video'); 
 

 
     $(window).on('resize', function() { 
 
     scaleVideoContainer(); 
 
     scaleBannerVideoSize('.video-container .poster img'); 
 
     scaleBannerVideoSize('.video-container .filter'); 
 
     scaleBannerVideoSize('.video-container video'); 
 
     }); 
 

 
    }); 
 

 
    /** Reusable Functions **/ 
 
    /********************************************************************/ 
 

 
    function scaleVideoContainer() { 
 

 
     var height = $(window).height(); 
 
     var unitHeight = parseInt(height) + 'px'; 
 
     $('.homepage-hero-module').css('height', unitHeight); 
 

 
    } 
 

 
    function initBannerVideoSize(element) { 
 

 
     $(element).each(function() { 
 
     $(this).data('height', $(this).height()); 
 
     $(this).data('width', $(this).width()); 
 
     }); 
 

 
     scaleBannerVideoSize(element); 
 

 
    } 
 

 
    function scaleBannerVideoSize(element) { 
 

 
     var windowWidth = $(window).width(), 
 
     windowHeight = $(window).height(), 
 
     videoWidth, 
 
     videoHeight; 
 

 
     console.log(windowHeight); 
 

 
     $(element).each(function() { 
 
     var videoAspectRatio = $(this).data('height')/$(this).data('width'), 
 
      windowAspectRatio = windowHeight/windowWidth; 
 

 
     if (videoAspectRatio > windowAspectRatio) { 
 
      videoWidth = windowWidth; 
 
      videoHeight = videoWidth * videoAspectRatio; 
 
      $(this).css({ 
 
      'top': -(videoHeight - windowHeight)/2 + 'px', 
 
      'margin-left': 0 
 
      }); 
 
     } else { 
 
      videoHeight = windowHeight; 
 
      videoWidth = videoHeight/videoAspectRatio; 
 
      $(this).css({ 
 
      'margin-top': 0, 
 
      'margin-left': -(videoWidth - windowWidth)/2 + 'px' 
 
      }); 
 
     } 
 

 
     $(this).width(videoWidth).height(videoHeight); 
 

 
     $('.homepage-hero-module .video-container video').addClass('fadeIn animated'); 
 

 

 
     }); 
 
    }

.homepage-hero-module { 
 
    border-right: none; 
 
    border-left: none; 
 
    position: relative; 
 
} 
 
.no-video .video-container video, 
 
.touch .video-container video { 
 
    display: none; 
 
} 
 
.no-video .video-container .poster, 
 
.touch .video-container .poster { 
 
    display: block !important; 
 
} 
 
.video-container { 
 
    position: relative; 
 
    bottom: 0%; 
 
    left: 0%; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: #000; 
 
} 
 
.video-container .poster img { 
 
    width: 100%; 
 
    bottom: 0; 
 
    position: absolute; 
 
} 
 
.video-container .filter { 
 
    z-index: 100; 
 
    position: absolute; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    width: 100%; 
 
} 
 
.video-container .title-container { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    top: 35%; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 
.video-container .description .inner { 
 
    font-size: 1em; 
 
    width: 45%; 
 
    margin: 0 auto; 
 
} 
 
.video-container .link { 
 
    position: absolute; 
 
    bottom: 3em; 
 
    width: 100%; 
 
    text-align: center; 
 
    z-index: 1001; 
 
    font-size: 2em; 
 
    color: #fff; 
 
} 
 
.video-container .link a { 
 
    color: #fff; 
 
} 
 
.video-container video { 
 
    position: absolute; 
 
    z-index: 0; 
 
    bottom: 0; 
 
} 
 
.video-container video.fillWidth { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- VIDEO BACKGROUND --> 
 
<div class="homepage-hero-module"> 
 
    <div class="video-container"> 
 
    <div class="title-container"> 
 
     <div class="headline"> 
 
     <h1>Welcome to the Devix Theme</h1> 
 
     </div> 
 
     <div class="description"> 
 
     <div class="inner">This is the Demo for the Devix Theme with Video Background.</div> 
 
     </div> 
 
    </div> 
 
    <div class="filter"></div> 
 
    <video autoplay loop class="fillWidth"> 
 
     <source src="http://www.devix-design.com/demos/static/devixtheme/video/video/backgroundvideo.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
 
    <div class="poster hidden"> 
 
     <img src="http://www.videojs.com/img/poster.jpg" alt=""> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- video-background -->

Answer 1

あなたは国境に

.fillWidth{ 
    border:0px !important; 
    }