javascript - 固定顶部导航栏下方的响应式全屏视频

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 停留在视频上方，并且顶部的视频被 chop 了。

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

我应该使用媒体查询并设置视频及其容器的固定宽度和高度吗？这样对吗？

可能是这样的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
    });  
}