Geek Answers Handbook

Responsive iframe with a fixed div below 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 and the styles that I already use for details)

How can I set the bottom panel # at the bottom, while the video on top of it remains sensitive and adjusts to free space without interfering with the bottom panel? I’m thinking about achieving a typical experience with a list player / information bar, which is always underneath.

I would prefer a CSS solution only.

+6
source share
9 answers

Just fix the top of the iframe, left, right, and set the number of pixels at the bottom and give your iframe a width and height of 100% inside, and then fasten the bottom panel. For instance:

Here is the violin Demo Screenshot

 <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%; }
+4
source

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

I made #container for #theVideo and #bottom-bar and made it display:table;

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

 <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/

+2
source

I usually agree with Drinkin People's answer. But I can imagine that everything in fixed positions is far from perfect on a web page. So I realized something else that does what you want, but also scrolls.

The method is based on the calc and vh (viewport height) functions. Therefore, if you decide to use this method, keep in mind if you want to support older browsers.

Here is the fiddle

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

Secondly, we set the width and height of the iframe to 100%. Also set the borders to 0, because this may cause a little problem with scroll lists if we don't.

Thirdly, we give the dimensions of the bottom panel. width: 100% and height: 20 pixels;

This will create a full-screen video viewer, with the bottom pane you want. I also added "# more-stuff" for an extra scroll effect. Just delete it if you don't need the scroll effect.

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

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; }
+2
source

You can use position:fixed for #bottom-bar and give z-index:2 , for the 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>
+2
source

You just need to make a container for your video full width and height, and then make the bottom panel fixed using CSS. You will need to use JavaScript and make adjustments if you want the footer to not 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 if you have jQuery, here is the JavaScript:

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

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

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>
+1
source

If you can slightly shift the markup, this will make it easier to keep the strip 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>

Then you can customize the video content with 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%; }

Finally, attach the bar to the bottom:

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

See here: https://jsfiddle.net/7qure8f5/1/

0
source

Here we go...

I assume that you want the video to cover the entire available area on the screen ...

The idea is to have a div containing the video:

  • The full height is 100vh , then make the width 178vh (178% of the height of the viewing screen, i.e. 16: 9 ratio), this will work for most screens with 16: 9 hd for less wide.
  • For wider screens (not very popular) we use @media min-aspect-ratio to create the full width of the video 100vw and set the height as 56.25% of the width of the viewport ( 56.25vh ).

Thus, the video is always larger than the available screen both in height and in width :-)

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

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

Here is the violin
https://jsfiddle.net/Luma4221/5/

0
source

HTML:

  <iframe id="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 id="bottom-bar"> Bottom bar </div>

CSS

 #iframe { position: relative; width: 100%; height: 500px; border: 0; } #bottom-bar { position: fixed; bottom: 0px; overflow-y: hidden; }

Here is an example: https://jsfiddle.net/7as89kk3/4/

-one
source

More articles:


All Articles