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.

Just so I'm understanding this correctly: are you looking for full browser window video with a fixed div at the bottom? — Jon Chan, Jun 07 '16 at 21:30
Hi there... I assume you wanna make the video cover the entire screen... If that's right check out my **pure css** solution ;-) — shramee, Jul 11 '16 at 16:05
http://stackoverflow.com/questions/37688873/responsive-iframe-with-fixed-div-beneath-it/38311327#38311327 — shramee, Jul 11 '16 at 16:05

score 5 · Accepted Answer · answered Jul 08 '16 at 04:25

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%;
}

Ahmed Salama · Answer 2 · 2016-07-08T15:19:19.053

You can use diplay:table; and table-row to achieve this

I made a #container for #theVideo and the #bottom-bar and make its display:table;

Then #theVideo and #bottom-bar will be display:table-row, but we will make the #theVideo has height:100%; so it will try to be 100% of the height but will leave the space of #bottom-bar

<div id="container">

  <div id="theVideo">
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe>
  </div>
  <div id="bottom-bar"><p>Lorem Ipsum</p></div>

</div>

CSS:

body {
  background-color: black;
  color: white;
  margin: 0;
}
#container{
  position:absolute;
  width:100%;
  height:100%;
  display:table;
}
#theVideo{
  display:table-row; 
  height:100%;
}
#theVideo iframe{
  width: 100%;
  height: 100%;
  border: none;
}
#bottom-bar{
  display: table-row;
  background-color: rgb(51, 51, 51);
}
#bottom-bar p{
  margin:0;
  padding:5px;
}

See the demo here https://jsfiddle.net/pgr26vg0/2/

Awesome! Can you say something about browser compatibility of your solution? — tyrondis, Jul 07 '16 at 16:40
This solution hasn't any problem with browser compatibility. It will work fine on all browsers. — Ahmed Salama, Jul 08 '16 at 15:21

score 2 · Answer 3 · answered Jul 08 '16 at 17:17

I would normally agree with Drinkin People's answer. But I can imagine having everything on fixed positions is far from ideal on a webpage. So I figured out something else that does what you want, but is also scrollable.

The method relies on the calc function and the vh(viewport height). So if you decide using this method, keep in mind if you want to support older browsers.

Here is a fiddle

First we set the width of the container to 100% and its height to calc(100vh - 20px). The 20px is the space specified for your #bottom-bar.

Second we set the width and height of the iframe to 100%. Also set the borders to 0, because that would cause a little issue with scrolling bars if we don't.

Thirdly we give the bottom-bar dimensions. width: 100% and height: 20px;

This would create a fullscreen video-viewer, with the bottom bar you desire. I also added "#more-stuff" for the optional scroll effect. Just remove it if you do not want the scrolling effect.

PS: If you replace height: calc(100vh - 20px); with max-height: calc(100vh - 20px). It should also work inside a div container that changes size.

HTML

  <div id="iframe-container">
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe>
  </div>
  <div id="bottom-bar">Lorem Ipsum</div>
  <div id="more-stuff"></div>

CSS

body {
  background-color: blue;
  color: white;
  margin: 0;
}
#iframe-container{
  height: calc(100vh - 20px);
  width: 100%;
}
#iframe-container iframe{
  width: 100%;
  height: 100%;
  border: 0px;
}
#bottom-bar{
  width: 100%;
  height: 20px;
  background-color: black;
}
#more-stuff{
  width:100%;
  height: 400px;
  color: yellow;
}

Thank you! However, I wanted a website where everything is fixed. Sorry I did not specify this in my question. — tyrondis, Jul 12 '16 at 04:09

Jon Chan · Answer 4 · 2016-06-08T20:18:10.083

You just need to make the container for your video full width and height, then make your bottom bar fixed with CSS. You'll have to use JavaScript and make adjustments if you want to make sure the bottom footer doesn't overlap with the video.

HTML:

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>

Then CSS:

body {
    margin: 0;
}
.video-container {
    width: 100%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#bottom-bar {
    position: fixed;
    width: 100%;
    background: white;
    bottom: 0;
}

And assuming have jQuery, here's the JavaScript:

$(function() {
    var resizeVideo = function() {
        $(".video-container, .video-container iframe").height($(document).height() - $("#bottom-bar").height());
    }
    $(window).resize(resizeVideo);
    resizeVideo();
})

I can't have the bottom bar overlay the video, as this is non-compliant with YouTube's T&Cs — tyrondis, Jun 07 '16 at 22:11
You'll have to use JavaScript in this case. See my edited answer. — Jon Chan, Jun 08 '16 at 20:16
You can add a margin to the bottom of the page equal to the height of the bottom bar: video-container {margin-bottom: 40px;} #bottom-bar {height: 40px} in addition to the CSS above. — Christian Hill, Jun 08 '16 at 20:21

Stickers · Answer 5 · 2016-07-08T12:20:44.677

Try using flexbox. All modern browsers support it, with prefixes it also works in IE10. The footer can be dynamic height, so it also works when the text wraps. I also moved all the inline style in your example to the CSS panel, to make it easier to see.

jsFiddle

html, body {
  height: 100%;
}
body {
  background-color: black;
  color: white;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.video-player {
  flex: 1;
  position: relative;
}
.iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.bottom-bar {
  background-color: rgb(51, 51, 51);
  padding: 5px;
}

<div class="video-player">
  <iframe src="https://www.youtube.com/embed/TpBF_DRxWSo?autoplay=0&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" class="iframe"></iframe>
</div>
<div class="bottom-bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et magna volutpat, hendrerit nisi nec, tincidunt risus. Aliquam eu massa et lectus cursus dapibus.</div>

Mani · Answer 6 · 2016-07-11T12:24:12.773

You can use position:fixed for #bottom-bar and give z-index:2, for top div z-index:1 in inline

<body>
<style>
body {
  background-color: black;
  color: white;
  margin: 0;
}
#bottom-bar{
 position: fixed;
 bottom: 0;
 z-index: 2;
 width: 100%;
}
</style>
  <div style="position: relative; display: block; height: 0px; padding: 0px 0px 56.25%; overflow: hidden;z-index:1;">
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" style="position: absolute; top: 0px; left: 0px; bottom: 0px; height: 100%; width: 100%; border: 0px;"></iframe>
  </div>
  <div id="bottom-bar" style="background-color: rgb(51, 51, 51); padding: 5px;">Lorem Ipsum</div>
</body>

score 0 · Answer 7 · answered Jun 08 '16 at 23:54

If you can shift the markup slightly, it'll make it easier to keep the bar relative to the container:

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

Next you can make the video container responsive by using this trick:

.video-container {
  height: 0;
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;
}

.video-container iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

Lastly, stick your bar to the bottom:

#bottom-bar {
   padding: 10px;
   position: absolute;
   width: 100%;
   left: 0;
   top: 100%;
}

See it in action here: https://jsfiddle.net/7qure8f5/1/

score 0 · Answer 8 · answered Jul 11 '16 at 15:58

Here we go...

I'm assuming you want the video to span entire available region on the screen...

Idea is to have div containing the video to be:

Full height 100vh then make the width 178vh (178% of viewport height i.e. 16:9 ratio) this will work a treat for most screens which are 16:9 hd for less wide.
For even wider screens ( not very popular ) we use @media min-aspect-ratio to make video full width 100vw and set height as 56.25% of viewport width (56.25vh).

Thus video is always larger than available screen both in height as well as width :-)

Then we center it with position absolute; left, right, top and bottom as -999px then set margin auto perfectly centering the video both horizontally and vertically ;-)

We added a class video-container to the div containing the video.

Here's a fiddle,
https://jsfiddle.net/Luma4221/5/

Responsive iframe with fixed div beneath it

8 Answers8