CSS - Fluid width video with max height 100% window

Question

I'm looking for a CSS way to embed a responsive video (iframe) so that its height is always 100% of the window and width adapts to whatever the ratio allows. All I can find on the matter is about the opposite (variations of this technique).

So ideally it would be like

.videoContainer {
  height: 100%; 
  width: auto;
  max-width: 90%; // Bonus : I need the video not to be 100% width 
  display: inline-block;
  position: relative;
}

.videoContainer::after {
  padding-top: 56.25%; 
  display: block;
  content: '';
}

.videoContainer>iframe{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

I'm not sure it's even possible. No JS preferably.

[this post](http://stackoverflow.com/a/20593342/703717) may help... towards the end there's also an example for 90% width — Danield, Feb 17 '16 at 02:39

score 5 · Accepted Answer · edited May 23 '17 at 12:23

5

Perfect answer thank to Danield in this post :

iframe {
    width: 90vw; /* 90% of viewport vidth */
    height: 50.625vw; /* ratio = 9/16 * 90 = 50.625 */
    background: pink;
    max-height: 90vh;
    max-width: 160vh; /* 16/9 * 90 = 160 */
    margin: auto;
    position: absolute;
    top:0;bottom:0;
    left:0;right:0;
}

edited May 23 '17 at 12:23

Community

1
1

answered Feb 17 '16 at 02:46

kursus

1,396
3
19
35

CSS - Fluid width video with max height 100% window

1 Answers1