CODEWITHSUNDEEP
javascriptjqueryhtmlresponsive-design
Garfield
Garfield

Reputation: 2537

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

Upvotes: 4

Views: 4154

Answers (3)

Himanshu Vaghela
Himanshu Vaghela

Reputation: 1119

If you using bootstrap then they have own responsive embedded class. Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to , , , and elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your s as we override that for you.

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

OR

With out bootstrap

Create a container div around the iframe code and give it a class eg:

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

Add in the 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%;
}

The first CSS declarations target the video container and the second target what is in the container, in this case it's the iframe, you can also apply this to objects and embed elements.

That's it the video will now scale as the viewport is resized, the magic element is the padding-bottom rule of 56.25%, this figure is reached by using the video's aspect ratio of 16*9, so 9 divided by 16 = 0.5625 or 56.25%, full explanation in alistapart article.

Also get same out put using 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
    });  
}

Here's your updated fiddle.

/** 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');


  });
}
.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="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 -->

Upvotes: 1

falak
falak

Reputation: 77

use bootstrap builtin class responsive and here is some different method 

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

Upvotes: 0

The F
The F

Reputation: 3724

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

Upvotes: 3

Related Questions