Why HTML5 Iframe Width Isn't The Best Option To Control Sizing
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
- Attribute of
- Using The HTML Tag To Create Inline Frames: Here's How
- What does
Why HTML5 Iframe Width Isn't The Best Option To Control Sizing
do? - Specifies the width of an iframe.
Code Example
<iframe width="100%" height="500" src="https://html.com"></iframe>
Valid, but maybe don’t use
Most of the styling attributes associated with <iframe>
(and most other elements as well) have been deprecated in HTML5. However, width
and [height
] persist. So their use in specifying the size of an <iframe>
is perfectly valid, but its a little hard to understand what the thinking was on this. Regardless of validity, the best design practice — especially from a responsive perspective — is to use CSS to control the sizing. This removes presentational information from your markup and allows you to more easily design for a wide range of browser sizes.
iframe.example { width: 100%; height: 600px; }
<iframe class="example" src="/html5"></iframe>
iframe.example { width: 100%; height: 600px; }
Browser Support for width
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
All | All | All | All | All | All |