Responsive iframe with fixed div beneath it

Question

Given the following DOM structure:

<div>
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>

(See this JSFiddle for details and the styles I am already using)

How can I achieve the #bottom-bar to be fixed at the bottom while the video on top of it remains responsive and adjusts to the space it has available, without interfering with the bottom bar? I am thinking of achieving a typical video player experience with a scroll/info bar that is always beneath it.

I'd prefer a CSS only solution.

Answer 1

Just fix an iframe wrapper top, left, right, and set a number of px from the bottom and give your iframe a width and height of 100% inside of it then fix your bottom bar. Like so:

Here is a fiddle Fiddle Demo

<div class="iframe-wrapper">
  <iframe src="https://www.youtube.com/embed/Ycv5fNd4AeM?autoplay=1"></iframe>
</div>
<div class="bottom-wrapper">
  Bottom Wrapper
</div>

And Css

.iframe-wrapper{
  position:fixed;
  top:0;left:0;right:0;bottom:50px;
}
.iframe-wrapper iframe{
  width:100%;
  height:100%;
  border:none;
}
.bottom-wrapper{
  height:50px;
  position:fixed;
  bottom:0;left:0;
  width:100%;
}