Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive iframe with fixed div beneath it

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.

like image 300
tyrondis Avatar asked Jun 07 '16 20:06

tyrondis


People also ask

Can you make iframe content responsive?

A responsive iframe will render well across a variety of devices and screen sizes. In order to make your embedded iframe responsive, you need to wrap the iframe in a div and apply inline css.

Can you put an iframe in a div?

By using an <iframe> within a <div> , it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular.

Are iFrames mobile friendly?

Often times these external content sources will provide an 'embed' code (HTML) using iFrames. These embed codes are great, but usually do not play nice with mobile browsers.

How do I make my iframe 100% height?

Just set the positioning of the fixed element and add a height / width of 100% .


1 Answers

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%;
}
like image 119
Steve K Avatar answered Sep 28 '22 14:09

Steve K