Menu
I am having problems with my iframe. I really want the frame to auto adjust heights according to the content within the iframe. I really want to do this via the CSS without javascript. However, I will use javascript if I have too.
I've tried height: 100%; and height: auto;, etc. I just don't know what else to try!
Here is my CSS. For the frame...
#frame { position: relative; overflow: hidden; width: 860px; height: 100%; } And then for the frame's page.
#wrap { float: left; position: absolute; overflow: hidden; width: 780px; height: 100%; text-align: justify; font-size: 16px; color: #6BA070; letter-spacing: 3px; } The page's coding looks like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" �� "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>...</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="navigation"> <a href="/" class="navigation">home</a> <a href="about.php" class="navigation">about</a> <a href="fanlisting.php" class="navigation">fanlisting</a> <a href="reasons.php" class="navigation">100 reasons</a> <a href="letter.php" class="navigation">letter</a> </div> <div id="content" > <h1>Update Information</h1> <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe> </div> <div id="footer"> </div> </div> </body> </html> Please note that the URL within the iframe is different then the website the iframe will be displayed on. However, I have access to both websites.
Can anyone help?
969
Answer: Use the contentWindow Property You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
Next, we put the <iframe> inside this box, making it fill the whole box. To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio. Enjoy.
Unlike images and the native HTML5 video element, iframes do not scale responsively by default.
You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
The CSS aspect-ratio property tells browsers to preserve a specific aspect ratio on an element when scaling the size of it up or down. We can target iframe elements directly with a few lines of CSS to preserve their dimensions in responsive layouts, without the need for a wrapper element. Set the height and width of the iframe to 100%.
If there is a separate CSS document linked within your HTML code, you can find the CSS document in the tag that resembles "<link rel="stylesheet" href="css_document.css">." It is usually found within the "<head>" section. Locate the iframe element. In CSS, the iframe element tag looks like "iframe {". Locate the iframe element within the CSS code.
We can target iframe elements directly with a few lines of CSS to preserve their dimensions in responsive layouts, without the need for a wrapper element. Set the height and width of the iframe to 100%. Then assign an aspect-ratio property with a value of width / height. For our HD videos, we’d use 16 / 9.
I had this same issue but found the following that works great:
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" allowfullscreen></iframe> It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container"> <iframe src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" allowfullscreen class="video"></iframe> </div> And use the following CSS:
.container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Here is the page I found the solution on:
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%; to get the height right.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With