[SOLVED] Resizing responsive video vertically

[amanda_]

Hello,

I’m required to make a video responsive, so the whole video always fits on the screen (including the bottom). I’ve achieved that on window load, by putting an extra div around the div that holds the iframe and checking the window width to height ratio.

Where I’m stumbling is on window resize. If the site visitor opens up on browser with a short height, they will see the whole video, but if they decide to make the browser a little taller, to make it bigger, it’s not responsively resizing, and they would need to refresh the browser.

What am I missing here? Thanks!!!
http://codepen.io/ald603/pen/jrNVmZ/

[Senff]

Not entirely sure what you want to do, but this may help; it’s the method I always use to embed Youtube videos and make them responsive so that the height of the iFrame is always proportional to the width.

http://codepen.io/senff/pen/aZopBN

[amanda_]

Hi Senff, thanks for responding!

What I’m trying to do is make sure the height of the video is never higher than that of the window (as the full video needs to be seen, no matter what window height the user has).

I have it working fine on load, it’s the resize that I’m stuck at.

[I.m.learning]

What I’m trying to do is make sure the height of the video is never higher than that of the window

I’m curious to know why would the height change if it’s in a frame? Isn’t that the purpose of a frame? Isn’t that what “responsive” means? No matter the height/width, it should stay visible within the viewport?

Anyways, I had an iframe and wanted it responsive and used a combination of both of your codes. Except I only used 1 div.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

and

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Then again, I use and found out Bootstrap has presets for images, iframes, and others that allow me to concentrate on only the css for styling.

[I.m.learning]

Bootstrap:
HTML:
class= embed-responsive-item

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,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

[Yaphi Berhanu]

The original code is almost there.

Your variables are being set at the beginning outside the checkWindowRatio function.

For example, windowWidth gets set only once, so if it’s 500 for example, it’ll stay 500.

What you want is to set the windowWidth variable inside your checkWindowRatio function. That way, the width will update every time you run checkWindowRatio.

[bearhead]

Maybe this will work for you:
http://codepen.io/kvana/pen/OXLmvg

[amanda_]

yaphi1 –

Thank you! That did the trick. Silly me. Now it’s working as I had hoped.

bearhead

Very nice CSS only solution! The only thing is is it creates a black background when the extra space is vertical. But I would definitely find this useful in other situations.

LIP_lostinprogramming
What I was trying to (and have) achieve is responsiveness both on vertical and horizontal resizing of the browser, which is why I had to wrap an extra div around the standard intrinsic ratio solution.

[Author]

Posts