Lonely Planet Lonely Planet - 5 months ago 41
Javascript Question

Responsive full screen video below fixed top navbar

How can I have a full sized responsive HTML5 video under the bootstrap's fixed top nav bar?

This is my sample code:

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


After searching through many questions, the above
video div
could actually fits my video completely on the window (which actually moves my video to middle of the body and scales to fit entire window), so I thought if I could adjust the
transform values
to something else would work.

But
nav bar
stays above video and there is a cut off of video on the top.

Is there any way to make my video fit completely under the navbar?

Should I use the media queries and set
fixed width & height
of video & its container? Is that right way?

Could be like this http://jsfiddle.net/mgmilcher/8R7Xx/sho/ but this hides part of video on the tap by navbar

Answer

You can easily do this by calculating your header height, and setting it as margin-top on your video-container on init as well as on resize.

This is your updated fiddle

Update your code like so:

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