CODEWITHSUNDEEP
javascripthtmlcssiframevertical-alignment
NORD LYCHT
NORD LYCHT

Reputation: 13

Need responsive iframe (div) / fixed aspect ratio / centered horizontally and vertically / that SCALES itself so it's not getting browser-cropped

Oh man this is frustrating. I always thought I know my way around HTML and CSS but this is driving me crazy!

I have a blank black HTML page only containing a 16:9 iframe with the id "content".

In this iframe videos and photos with an 16:9 aspect ratio will be shown to the user (this will be an offline application running in Firefox, something like a primitive media player).

Everything inside the iframe works (quite an elaborate multimedia experience) everything is fine EXCEPT the placement/dimensions of that "player" iframe on the blank index page!

It needs to be centered VERTICALLY with a width of 100% thus touching both sides of the browser window,

it needs to be responsive when the browser windows is resized but needs to keep its aspect ratio of course,

and most important; it must always be completely visible! Meaning I must NOT be cropped by the browser window!

No big deal I reckon with tall 4:3 or 5:4 displays, when centered vertically there will be bars at the top and the bottom of the iframe (the black HTML body) and it won't be cropped anywhere.

But kind of a big deal with 16:10 an 16:9 displays since the browser toolbars and the Windows task bar and what have you screw everything up, the aspect ratio isn't really 16:9 or 16:10 anymore when the browser is maximized. So the 16:9 iframe would not be completely visible, it would get cropped a the bottom.

(or maybe the user hasn't even maximized the browser and uses the application in an awkward proportioned window with an even more extreme aspect ratio).

So the iframe needs to STOP growing responsively before its bottom side gets cropped by the browser window. Never be taller than 100vh.

I tried A LOT and in the end I had convoluted div-arrays with a shtload of CSS that accomplished almost everything except the bottom clipping.

I am aware of things like "vh" and "vw" and "max-height" and what have you and I tried A LOT. Never got that iframe from being cropped at the bottom when the browser windows gets too long. I tried things similar to THIS:

Vertically center responsive iframe

but with this the elements height cannot be limited to "100vh" since it uses this padding-workaround for keeping its aspect ratio. :-(

I mean this must be possible, right? A centered (h&v) 16:9 div/iframe that uses as much screen estate as possible but refrains from being cropped anywhere.

HELP PLEASE! Thank you!!

Upvotes: 0

Views: 1107

Answers (2)

Kristiyan Kostadinov
Kristiyan Kostadinov

Reputation: 3712

Taken from Bootstrap 3.0, just apply the CSS class and whether it should be 16 by 9 or 4 by 3:

JSfiddle with the result: http://jsfiddle.net/crisbeto/jvcg8v0y/

/* Embeds responsive

Credit: Nicolas Gallagher and SUIT CSS. */

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}

Upvotes: 1

Azrael
Azrael

Reputation: 1094

create a <div> and give that the ID "pusher" like this:

<div id="pusher"></div> and then add these css properties:

#pusher{
   height: 50%;
}

now set the css properties for your iframe, Give this a top-margin of minus half the height of the iframe, so if the iframe was 300 pixels heigh, your css for the iframe would be:

iframe{
    margin-top: -150px;
}

you could probaly use:

iframe{
   height: 100%;
   width: 100%;
   margin-top: -50%;
}

when you apply this method, what you basicly do is push all content to the vertical center of the screen, that way the "origin point" is at the center of the screen (vertical) now to center it like you needed you are applying the negative margin to center the "center point"

Upvotes: 1

Related Questions