CODEWITHSUNDEEP
jqueryhtmlcssstreaming
JacobTheDev
JacobTheDev

Reputation: 18550

Centering a DIV and adjusting based on browser dimensions

I'm building a web page to embed a streaming video in. I want to center the video both horizontally and vertically, while resizing (based on browser size, not manually) the video to fill the available screen real estate.

Here's the tricky part; This page has a navigation with 60px height, and the video must be in 16:9. I would like to be able to set a min-width and min-height of 800px width and 450px height. The video should not be able to overlap the navigation, so if it's a bit off center vertically, that's fine. I can use jQuery if necessary, although CSS(3) would be preferable. This page is mostly for private use, so I'm not worried too much about cross-browser compatibility.

I have no idea how to accomplish this at this level of complexity. My thoughts are to create a div that fills the rest of the page, and center it within that div with absolute positioning. Unfortunately, I don't know how to make it resizable and stay in the correct aspect ratio. If it helps, I'll be using both UStream and Justin.tv for this project.

Thanks.

EDIT 1: I can't figure out how to make the bottom div fill the rest of the page while subtracting the navigation. I thought height:100%; would cover it, but unfortunately that does the entire 100% of the page, including the 60px navigation.

Upvotes: 0

Views: 1221

Answers (3)

adeneo
adeneo

Reputation: 318342

Here's how I would do it : 

var videoElement = $("#IDofYourVideo");

function SizeUpVideo(elm) {
    var W = parseInt($(window).width()),   //get browser width
        H = parseInt($(window).height()),  //get browser height
        ratio = 16/9,                      //set ratio
        videoH = H-60,                     //subtract 60px
        videoW = H * ratio;                //set width according to ratio

    if (videoW > W) {videoW=W; videoH=W*(1/ratio);} //if width is more than screen, do it the other way around
    if (videoW >= '800' || videoH >= '450') {
        elm.css({top: (H-videoH+60)/2, left: (W-videoW)/2, height: videoH, width: videoW});
    } else {
        elm.css({top: 60, height: 450, width: 800});
    }
};

SizeUpVideo(videoElement);

$(window).bind("resize", function() {
    SizeUpVideo(videoElement);
});

Fiddle : http://jsfiddle.net/bAXwK/

Upvotes: 0

bookcasey
bookcasey

Reputation: 40511

Use this jQuery plugin: FitVids

Horizontal and vertical centering with CSS3 Flexbox (limited browser support, but as you said, that is not a problem)

Here is the code (without vender prefixes to simplify):

.parent{
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
}

Apply that to the parent of the video.

Now the navigation shouldn't interrupt the centering, but in the case that it does, you can always absolutely position the navigation bar. There will be some video clipped at the top, but 60px isn't that bad.

Upvotes: 1

luchopintado
luchopintado

Reputation: 939

try this code:

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

Upvotes: 0

Related Questions