Menu
Is there any spec specifying the default width/height of an IFrame?
Browsers I tested (FF, IE, Chrome) seem to use 300x150px but I couldn't find any spec on this. Should I ever come in the situation, can I rely on these values or should I always set width/height explicitly?
567
The standard size of an iframe for desktop is a width of "560" and height of "315."
The height & width of the iframe has to be set to 100% without scroll, except for the scroll that comes for the body when the content is loaded and the size of the content is more. The content of the iframe is another HTML page from the same domain. The iframe also needs to scale according to the responsive HTML page.
given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).
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.
I found the answer on the dev-tech-layout mailing list -- it's part of the CSS spec. The default ratio is 2:1.
The default width of 300px is defined in the last paragraph of the CSS spec, section on the width of inline replaced elements.
Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.
The default height of 150px is defined in the last paragraph of the CSS spec, section on the height of inline replaced elements.
Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'height' must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.
197
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
