![]() ![]() The behaviour is much like a frameset with fixed height top and bottom frames. Applying CSS to iframe How to apply CSS to iframe. It also had to stick to the bottom of the header & the top the footer. It had to stick to the to the sides (that part is easy). I needed to have a responsive iFrame for a chat room. Raph’s cited Bootstrap methods above are examples of only two embed ratios. All of the frameworks and preset ratios are even limiting. There are other types of embedded iFrames of the “media” variety. Resize to fix all iframes on page load. height( width * $( this ).data( "ratio" ) ) Resize the iframes when the window is resized Remove the hardcoded width & height attributes $( this ).data( "ratio", this.height / this.width ) Find & save the aspect ratio for all iframes His solution is similar to Tom’s Codepen javascript above. He also posed the question - what if the aspect ratio is not known? Then you need a little bit of javascript. Kudos to Gregory Gan for his amazing post and tip!īen Marshall wrote an article about this subject in March 2014 and Updated it recently in May. The CSS above is all it takes to turn a problematic, static IFRAME into a reactive element that's as easy to manipulate as an image. The IFRAME's CSS is unremarkable since the does most of the work positioning the IFRAME as absolute and setting its width and height to 100% constrains the element to the DIV's reactive dimensions. This ratio matches a YouTube height to width ratio, but you can use any ratio to match the ratio of your IFRAME usage. The padding-top is the interesting bit setting the padding-top to a percentage of height 9 / width 16 allows us to keep a desirable ratio. The parent has an interesting set of CSS: The will be the frame reactive frame of reference for the IFRAME. ![]() To make your IFRAME responsive you'll need to wrap it in a : I found an amazing post by Gregory Gan that describes an ingenious method for responsive IFRAMEs and I wanted to share it with all of you! The HTML ![]() IFRAME elements cause an all together different problem because they aren't restricted to dimensions. We use media queries and non-pixel-based dimensions to make responsive design easier in fact, img is one of my favorite CSS snippets. Responsive web design revolutionized the web and spurred a movement away from native apps to web apps easily customizable for a mobile environment. ![]()
0 Comments
Leave a Reply. |