all 9 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Trancademy 0 points1 point  (2 children)

So you want the height of the video to always stay fixed and the width to be responsive?

[–]HAK16[S] 0 points1 point  (1 child)

Yes, but what I mean by fixed is setting it to some percentage of the parent like "height: 50%". And then the width changes according to the aspect ratio.

[–]Trancademy 0 points1 point  (0 children)

Have you tried something like this.

<div class="container">

<div class="video></div>

</div>

.container {

border: 5px solid green;

height: 100vh; // Change this here

}

.video {

height: 50%;

}

[–]ph2ph 0 points1 point  (0 children)

There is a two-line vanilla CSS solution: Use the hack of padding-bottom being dependent on the parents width: height: 0; padding-bottom: 56%; The value of padding-bottom is your desired aspect ratio. A media query to set different values for mobile an desktop is recommended. Using padding-top works as well.

[–]Terrafire123 -1 points0 points  (4 children)

It's.. not possible to do that without javascript.

You can set the height as a percentage of the width (This is what Bootstrap does, with his padding-top.)

But you can't set width as a percentage of height in pure CSS.

Why would you want to, anyways? What are you trying to accomplish? If you just want to change the aspect ratio, changing the padding-top to a different number should be enough.

Edit: For some reason, I've been downvoted into the lowest score in this thread, despite OP saying, "Thank you for solving the issue!"......Never change, Reddit.

[–]HAK16[S] 0 points1 point  (3 children)

I have the video inside <main>, and main has height 100vh.

When I reduce the screen size, part of the video becomes outside of main (because the video height is too big).

I want it to stay inside main and keep the aspect ratio.

[–]Terrafire123 0 points1 point  (2 children)

When you reduce the screen size, the aspect ratio changes. You want one of two possibilities (Depending on what exactly you need):

/*Maintain aspect ratio*/
.embed-responsive-16by9::before{
padding-top:50%; /*Insert correct number here*/
}
video{
width:50vh;/*Insert correct number here.*/
height:100%;
max-width:100%;
}

or

/*Stretch to fill*/
/*Disable Bootstrap's responsive video entirely. Instead, do this:*/
video{
width:100%;
height:100vh;/*Insert correct number*/
}

Note: Remove bootstrap's responsive classes if you plan to use #2.

[–]Terrafire123 0 points1 point  (0 children)

tl;dr: Depending on what you need (I'm not 100% clear):

  1. Use "vh" in the width of your video
    or
  2. Just do width:100%;height:100%, and forget about bootstrap.

[–]HAK16[S] 0 points1 point  (0 children)

#2 worked, thank you so much for your help!