0

I'm working on a redesign project that involves responsive web design and we have video elements on the page that expand to fill the full width of the page, which is what we want them to do. However, because of the aspect ratio of some screens we are testing on, and the aspect ratio of the video we are using, some videos are then taller than the screen will allow - the entire height of the video does not fit on the screen.

Is it possible to have a video (embedded from YouTube) that expands to the maximum width UNTIL it hits the maximum height of the page? Something like max-height: 95% (of the page).

halfer
  • 19,824
  • 17
  • 99
  • 186
TatiannaWS
  • 51
  • 7
  • possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – davidcondrey Oct 05 '14 at 00:01
  • Wondering about this as well... didn't find a proper answer on SO yet. The container div resizes perfectly, and the video scales well, keeping the proper aspect ratio, though when the screen height becomes the limit the video becomes cropped due to the container not resizing to a maximum frame respecting aspect ratio. – Joris Kroos Sep 17 '15 at 08:34

1 Answers1

1

max-height is works when your container extends the height.

like if your container height is 600px and you define the max-height: 500px then your container height becomes 500px.

Paste your code so i can tell more about your issue.

Sumit
  • 698
  • 4
  • 11
  • I don't have any of the code since I'm not working with the developers directly on this. I'm trying to figure out what to suggest to the developers so that they can implement it. – TatiannaWS Jan 14 '14 at 18:33
  • From my understanding max-height focuses on the inherited height of the various divs and containers and works within those parameters. I'm looking for a way to set the maximum height relative to the height of the screen size. Would that need some sort of JavaScript? – TatiannaWS Jan 14 '14 at 18:36