javascript – 在固定顶部导航栏下面的响应全屏视频

如何在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>

在搜索了很多问题之后,上面的视频div实际上可以完全适合我的视频在窗口上(实际上我将视频移动到身体的中间并缩放以适应整个窗口),所以我想如果我可以将变换值调整为某些东西否则会起作用.

但是导航栏仍然位于视频上方,并且顶部有视频中断.

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

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

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

解决方法:

您可以通过计算标题高度,并在初始化和调整大小时将其设置为视频容器的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
    });  
}