javascript - 视频背景有时有边框，有时不在 Bootstrap 中

Question

我有一个带有视频背景的 Bootstrap 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;
    }