Responsive iframe with fixed div beneath it - html

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

Answer 2

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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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/

Answer 3

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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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;
}

Answer 4

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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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();
})

Answer 5

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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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>

Answer 6

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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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>

Answer 7

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/

Answer 8

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/