CSS - Fluid width video with max height 100% window
<p>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 <a href="https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php" rel="nofollow">this technique</a>).</p>

<p>So ideally it would be like </p>

<pre><code>.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&gt;iframe{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}  
</code></pre>

<p>I'm not sure it's even possible. No JS preferably. </p>