비디오 가끔 테두리가있는 경우가 있고 때로는 부트 스트랩이없는 경우가 있습니다.

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