Menu
I'm trying to get an iframe to behave like a normal non-floating DIV does. i.e. occupy full width of parent. Is this possible? Looking for something equivalent to saying display: div;
Edit: I'm not looking for width: 100% since i have another floating element to the left. A non-floating DIV would take the rest of the space on the right. This is the behavior i'm looking to achieve.
Working: With a DIV on the right - http://jsbin.com/onaxax/1/edit
Not Working: With an IFRAME on the right - http://jsbin.com/erapuv/1/edit
888
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.
Create HTML Create a <div> element with an id "wrap". Place an <iframe> element with an id "scaled-frame" inside the <div>. Add the src attribute with the content you want to display.
<iframe src="http://fullformlocationURL" width="100%" class="myIframe"></iframe> <script type="text/javascript" language="javascript"> $('. myIframe'). css('height', $(window). height()+'px'); </script>
In the HTML, put the player <iframe> in a <div> container. In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9.
You have to wrap your iframe in element with overflow:hidden that would occupy the remaining space, and than set the iframe's width to 100%.
Example.
142
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
