固定顶部导航栏

Question

如何在bootstrap的固定顶部导航栏下拥有完整尺寸的自适应HTML5视频？

这是我的示例代码：

<nav><!-- navbar goes here --></nav>
<div class="container">
    <div style="width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <video controls="" style="height: auto; width: 100%" autoplay="">
                <source src="videos/myvideo.mov">
        </video>
    </div>
</div>

在搜索了很多问题之后，上面的video div实际上可以完全适合我的视频在窗口上（实际上我将视频移动到身体的中间并缩放以适合整个窗口），所以我想如果我能将transform values调整为其他可行的方法。

但nav bar仍然高于视频，并且顶部有视频中断。

有没有办法让我的视频完全适合导航栏？

我应该使用媒体查询并设置fixed width & height视频＆amp;它的容器？这是正确的方式吗？

可能就像这个http://jsfiddle.net/mgmilcher/8R7Xx/sho/但是这会通过导航栏隐藏部分视频

Answer 1

您可以通过计算标题高度，并在初始化和调整大小的视频容器上将其设置为margin-top来轻松完成此操作。

This is your updated fiddle

更新你的代码：

function scaleVideoContainer() {
    var navbarHeight = $('.navbar-fixed-top').height() + 'px',
        height = $(window).height(),
        unitHeight = parseInt(height) + 'px';

    $('.homepage-hero-module').css({
      'margin-top': navbarHeight,
      'height': unitHeight
    });  
}

Answer 2

如果您使用bootstrap，那么他们就拥有自己的响应式嵌入式类。允许浏览器根据其包含块的宽度确定视频或幻灯片尺寸，方法是创建一个可在任何设备上正确缩放的内在比例。

规则直接应用于,,和元素;如果要匹配其他属性的样式，可以选择使用显式后代类.embed-responsive-item。

Pro-Tip！您不需要包含frameborder =＆＃34; 0＆＃34;在你的s中我们为你覆盖它。

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

或

没有引导程序

围绕iframe代码创建一个容器div，并为其提供一个类，例如：

<div class="video-container"><iframe.......></iframe></div>

添加CSS：

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

第一个CSS声明定位视频容器，第二个目标定位容器中的内容，在这种情况下它是iframe，您也可以将其应用于对象和嵌入元素。

视频现在可以随着视口大小调整而缩放，魔术元素是56.25％的填充底部规则，这个数字是通过使用16 *的视频宽高比达到的9，所以9除以16 = 0.5625或56.25％，alistapart article中的完整解释。

也可以使用JS获得相同的效果。

function scaleVideoContainer() {
    var navbarHeight = $('.navbar-fixed-top').height() + 'px',
        height = $(window).height(),
        unitHeight = parseInt(height) + 'px';

    $('.homepage-hero-module').css({
      'margin-top': navbarHeight,
      'height': unitHeight
    });  
}

这是你更新过的小提琴。

＆＃13;

＆＃13;

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

$(document).ready(function() {

  // Resive video
  scaleVideoContainer();

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

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

});

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

function scaleVideoContainer() {

  var navbarHeight = $('.navbar-fixed-top').height() + 'px';
  var height = $(window).height();
  var unitHeight = parseInt(height) + 'px';
  $('.homepage-hero-module').css({
    'margin-top': navbarHeight,
    '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');


  });
}

＆＃13;

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

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Company Name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Services</a>
        </li>
        <li class="active"><a href="#">Sectors</a>
        </li>
        <li class="active"><a href="#">News</a>
        </li>
        <li class="active"><a href="#">About Us</a>
        </li>
        <li class="active"><a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
    <!--/.navbar-collapse -->
  </div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="homepage-hero-module">
  <div class="video-container">
    <div class="title-container">
      <div class="headline">
        <h1>Welcome to our Company</h1>

      </div>
      <div class="description">
        <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
      </div>
    </div>
    <div class="filter"></div>
    <video autoplay loop class="fillWidth">
      <source src="http://dfcb.github.io/BigVideo.js/vids/dock.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>
<div class="container" id="content">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-4">
      <h2>Heading</h2>

      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
      </p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>

      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
      </p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>

      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <h2>Heading</h2>

      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      <p>
        <a class="btn btn-default" href="#" role="button">View details &raquo;</a>
      </p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>

      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
      </p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>

      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p>
        <a class="btn btn-default" href="#" role="button">View details &raquo;</a>
      </p>
    </div>
  </div>
  <hr>
  <footer>
    <p>&copy; Company 2014</p>
  </footer>
</div>
<!-- /container -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用bootstrap内置类响应，这是一些不同的方法

 <a href="https://codepen.io/ncerminara/pen/zbKAD/">link</a>