3 Ways To Resize IFrames In HTML - WikiHow

Trang chủ » Html Iframe Adjust Height To Content » 3 Ways To Resize IFrames In HTML - WikiHow

Có thể bạn quan tâm

Skip to ContentQuizzes
  • Home
  • Random
  • Browse Articles
  • Quizzes & Games
  • All QuizzesHot
  • Love Quizzes
  • Personality Quizzes
  • Fun Games
  • Dating Simulator
  • Learn Something New
  • Forums
  • Courses
  • Happiness Hub
  • Explore More
  • Support wikiHow
  • About wikiHow
  • Log in / Sign up
Terms of Use wikiHow is where trusted research and expert knowledge come together. Learn why people trust wikiHow How to Resize iFrames in HTML PDF download Download Article Co-authored by Jessica Andzouana and Travis Boylls

Last Updated: May 2, 2025 Fact Checked

PDF download Download Article
  • Using HTML
    • |
  • Using CSS
    • |
  • Using a Division Class
    • |
  • Expert Interview
    • |
  • Q&A
|Show more |Show less X

This article was co-authored by Jessica Andzouana and by wikiHow staff writer, Travis Boylls. Jessica Andzouana is a Software Engineer based in the San Francisco Bay Area. With over five years of professional experience in front-end development, digital art, and design, she is passionate about emerging technologies such as blockchain and AI. Her background as both a programmer and artist, paired with a highly design-conscious mindset, provides her a fresh perspective and unique skill set to produce creative solutions in her field. She works at Alcacruz as a Software Engineer, and received a dual BS/BA degree from Santa Clara in Computer Science and Studio Art. There are 7 references cited in this article, which can be found at the bottom of the page. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 178,828 times.

iFrames let you embed external content, such as YouTube videos, advertisements, and content from other sites into your own web page. You can easily resize iFrames using HTML and/or CSS, and even make them resizable so they'll adjust automatically based on the user's screen size. This wikiHow article will show you how to change the size of an iFrame using HTML and CSS.

Resizing iFrames Using HTML

Find the iFrame element in your HTML file, then look for the "width=" attribute. After the "=", enter the size in pixels you want the iFrame to be.[1] For example, an attribute of "width=500px" will size it to 500 pixels.

Steps

Method 1 Method 1 of 3:

Using HTML

PDF download Download Article
  1. Step 1 Open up your HTML file. 1 Open up your HTML file. HTML files have a the file extension ".html" or ".htm" after the file name. You can edit an HTML file using an text editor, such as Notepad, or TextEdit. You can also use an HTML editor such as Adobe Dreamweaver, Codepen, or HTML Online.
    • To open an HTML file in the text editor or code editor of your choice, right-click the HTML file. Then place the mouse cursor over Open with. Click the program or application you want to use to edit the HTML file.
  2. Step 2 Look for the iFrame element. 2 Look for the iFrame element. iFrames are usually found below the "<body>" section of the HTML document. Look for the tag "<iframe src=" followed by the URL of the content that is contained within the iFrame in quotations. Advertisement
  3. Step 3 Edit the width attribute. 3 Edit the width attribute. You should see the attribute "width=" after the URL in the iframe tag. Edit the width in pixels in quotations (" ") after the "width=" attribute.[2] For example, if you want the width to be 300 pixels, you would enter "width="300px"" after the URL in the tag. You can enter the width attribute anywhere after the URL and before the closing bracket (>).
    • Alternatively, if you want the iframe to adjust automatically based on the width of the user's screen or web browser, you enter a percentage instead of a fixed width. For example, if you want the iframe to use up 90% of the width, you would add the attribute "width="90%"."
    • If you do not see a "width=" attribute in the iframe tag, you can add it to the tag. It is also possible that the size of the iframe may be determined by the CSS code instead of the HTML tag.
  4. Step 4 Edit the height attribute. 4 Edit the height attribute. You should see the "height=" in the iframe tag. Edit the width in pixels in quotations (" ") after the "height=" attribute. For example, if you want the height to be 200 pixels, you would enter "height="200px"" as the height attribute. You can enter the height attribute anywhere after the URL and before the closing bracket (">").[3]
    • Alternatively, if you want the iframe to automatically adjust it size based on the space available, you can enter a percentage instead of a fixed height. For example, if you want the iframe to use 90% of the available space, you would enter "height="90%"" as the attribute. You can also use the attribute "height="auto"" to adjust the height automatically relative to the width.[4]
    • If you do not see a "height=" attribute in the iFrame tag, you can add it to the iframe tag. It is also possible that the size of the iFrame may be determined by the CSS code instead of the HTML tag.
    • Additionally, if you need your iframe to be able to scroll, you can add "scroll="true"" after height attribute before the closing bracket.
  5. Step 5 Ensure there is a closing tag. 5 Ensure there is a closing tag. Immediately after the iframe tag with all the attributes, there should be a closing tag.[5] The closing tag is simply </iframe>. Your iframe HTML code should look something like the following: <iframe src="iframe_contents.html" width="300px" height="200px" scroll="true"></iframe>
  6. Step 6 Save the HTML file. 6 Save the HTML file. When you are finished editing your HTML file, you can typically save the file by clicking File in the menu bar at the top, followed by Save.
  7. Step 7 Render the HTML. 7 Render the HTML. Rendering the HTML file allows you to see what it looks like and make sure you got the width and height just right. You can render the HTML file in any web browser of your choice. You can double-click the HTML file to open it in your default web browser. Alternatively, you can right-click the file, hover over Open with and select a web browser to open the file in.
    8. Advertisement
Method 2 Method 2 of 3:

Using CSS

PDF download Download Article
  1. Step 1 Open the HTML or CSS file. 1 Open the HTML or CSS file. CSS can be embedded within an HTML file, or it can be a separate CSS (.css) document linked within the HTML file. You can usually find the CSS portion of an HTML document below the "<style>" tag. It is usually in the "<head>" section of the HTML document. There you will find the CSS code or a link to the external CSS document.
    • 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.
  2. Step 2 Locate the iframe element. 2 Locate the iframe element. In CSS, the iframe element tag looks like "iframe {". Locate the iframe element within the CSS code. All the attributes are listed below the CSS element tag.
    • Alternatively, the size of an iframe can be controlled by a division class. If that is the case, you can find the name of the division class next to the tag "<div id=" in the HTML code. Then you can locate the division class name in the CSS code and edit the attributes below the division class name.
  3. Step 3 Edit the width attribute. 3 Edit the width attribute. Enter the width of the iframe in pixels after the "width:" attribute in the list of attributes below the iframe element. Then place a semicolon (";") after the attribute.[6] For example, if you want the iframe to be 300 pixels, the width attribute would be "width: 300px;"
    • Alternatively, if you want the width of the iframe to adjust automatically based on the size of the user's screen or web browser window, you can enter a percentage instead of a fixed size. For example, if you enter the attribute "width: 100%;", this will tell the iframe to use 100% of the horizontal space available.
    • If there is no width attribute, go ahead and add one.
      • xz
  4. Step 4 Edit the height attribute. 4 Edit the height attribute. Enter the height of the iframe in pixels after the "height:" attribute in the list of attributes below the iframe element. Then place a semicolon (";")after the attribute. For example, if you want the iframe to be 200 pixels high, the height attribute would be "height: 200px;"
    • Alternatively, if you want the height of the iframe to adjust automatically based on the size of the user's screen or web browser window, you can enter a percentage instead of a fixed size. For example, if you enter the attribute "height: 100%;", this will tell the iframe to use 100% of the vertical space available. You can also enter "height: auto;" to automatically adjust the height relative to the width.
    • If there is no height attribute, go ahead and add one.
    • Additionally, if you want the iframe to be able to scroll, you can add the attribute "overflow: auto;" to add a scroll bar when necessary.
  5. Step 5 Ensure there is a closing tag. 5 Ensure there is a closing tag. When you have entered all the attributes to the iframe element that you want, be sure to close the iframe element by placing a "}" at the bottom of the list. The iframe attribute properties will be applied to all iframes in your HTML code.[7] Your CSS iframe element should look something like the following: iframe { width: 300px; height: 200px; overflow: auto; }
  6. Step 6 Add an iframe to your HTML document. 6 Add an iframe to your HTML document. If there is not already an iframe tag in your HTML document, you can add one. It will go in the "<body>" section of your HTML You do not need to add "height" or "width" attributes to the HTML tag. Enter the following code to your HTML document to add an iframe. Replace '[content_url]" with the URL for the content goes inside the iframe:
    • <iframe src="[content_url]"></iframe>
  7. Step 7 Save the HTML file. 7 Save the HTML file. When you are finished editing your HTML file, you can typically save the file by clicking File in the menu bar at the top, followed by Save.
  8. Step 8 Render the HTML. 8 Render the HTML. Rendering the HTML file allows you to see what it looks like and make sure you got the width and height just right. You can render the HTML file in any web browser of your choice. You can double-click the HTML file to open it in your default web browser. Alternatively, you can right-click the file, hover over Open with and select a web browser to open the file in.
    9. Advertisement
Method 3 Method 3 of 3:

Using a Division Class

PDF download Download Article
  1. Step 1 Open the HTML and/or CSS file. 1 Open the HTML and/or CSS file. In addition to using individual CSS attributes to control the size of all iframes in your HTML document, you can also use a division class to control the size of an iframe or other content. Division classes act as a container that holds HTML code that is separate from the rest of the document. You can have multiple division classes, and they can each be styled using CSS.
  2. Step 2 Navigate to the CSS section. 2 Navigate to the CSS section. CSS can be embedded within an HTML file, or it can be a separate CSS (.css) document linked within the HTML file. You can usually find the CSS portion of an HTML document below the "<style>" tag. It is usually below the "<head>" section of the HTML file. There you will find the CSS code or a link to the CSS document.
    • If there is a separate CSS file link to the HTML code, you can find the CSS file in the tag that resembles "<link rel="stylesheet" href="css_file.css">" below the "<head>" section of the document.
  3. Step 3 Create a new division class ID. 3 Create a new division class ID. To create a new division class, type a period (".") followed by the division class name. Then add a "{" at the end to open the division class element. You can name the division class anything you want, but it cannot contain any spaces.
    • For example .iframe_container {.
  4. Step 4 Add a width attribute. 4 Add a width attribute. To add a width attribute, type "width:" followed by the width in pixels below the division class element. Then add a semicolon at the end (i.e. "width: 300px;").
    • Alternatively, if you want the width of the division class to adjust automatically based on the size of the user's screen or web browser window, you can enter a percentage instead of a fixed size. For example, if you enter the attribute "width: 100%;", this will tell the division class to use 100% of the horizontal space available.
  5. Step 5 Add a height attribute. 5 Add a height attribute. To add a width attribute, type "height:" followed by the width in pixels below the division class attribute. Then add a semicolon at the end (i.e. "width: 200px;").
    • Alternatively, if you want the height of the division class to adjust automatically based on the size of the user's screen or web browser window, you can enter a percentage instead of a fixed size. For example, if you enter the attribute "height: 100%;", this will tell the division class to use 100% of the vertical space available.
    • Additionally, If you want the division class to be able to scroll, you can add the attribute "overflow: auto;" to add a scroll bar when necessary.
  6. Step 6 Close the division class. 6 Close the division class. Once you are finished adding all the CSS attributes you want to add to the division class, add a "}" at the bottom of the list of attributes to close out the division class element in your CSS.
  7. Step 7 Add the division class container to your HTML file. 7 Add the division class container to your HTML file. Go to where you want to add an iframe in your HTML document. Then type "<div id="" followed by the division class id in quotations. Then add a closing bracket (">") at the end of the tag. (i.e.: "<div id="iframe_container">).
  8. Step 8 Add the iframe tag below the division class tag. 8 Add the iframe tag below the division class tag. You don't need to add any height or width attributes to the iframe HTML tag. The division class will determine the height and width of the iframe. Enter the following code to your HTML document to add an iframe. Replace '[content_url]" with the URL for the content goes inside the iframe:
    • <iframe src="[content_url]"></iframe>
  9. Step 9 Close the division class in your HTML document. 9 Close the division class in your HTML document. To close the HTML type </div> after the iframe tag and any other contents you want to go inside the iframe.[8] Your HTML document with the CSS should look something like the following: [9] <HTML> <head> <style> .iframe_container { width: 300px; height: 200px; overflow: auto; } </style> </head> <body> <div id="iframe_container> <iframe src="[content_URL]"></iframe> </div> </body> </html>
  10. Step 10 Save the HTML file. 10 Save the HTML file. When you are finished editing your HTML file, you can typically save the file by clicking File in the menu bar at the top, followed by Save.
  11. Step 11 Render the HTML. 11 Render the HTML. Rendering the HTML file allows you to see what it looks like and make sure you got the width and height just right. You can render the HTML file in any web browser of your choice. You can double-click the HTML file to open it in your default web browser. Alternatively, you can right-click the file, hover over Open with and select a web browser to open the file in.
    12. Advertisement

Community Q&A

Search Add New Question
  • Question What is HTML coding for books? James Paradox James Paradox Community Answer You can't code books. HTML is a programming language designed to be used on computers. Thanks! We're glad this was helpful. Thank you for your feedback. If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow Yes No Not Helpful 23 Helpful 8
  • Question How do I enlarge the window where I have embedded a Google doc into my website? Community Answer Community Answer You can do this by giving it padding and margin (if you are using elementor*). And if you are using any other service, like Classic Editor, then you can use a separator. Thanks! We're glad this was helpful. Thank you for your feedback. If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow Yes No Not Helpful 1 Helpful 0
Ask a Question 200 characters left Include your email address to get a message when this question is answered. Submit Advertisement

Tips

Submit a Tip All tip submissions are carefully reviewed before being published Name Please provide your name and last initial Submit Thanks for submitting a tip for review!

You Might Also Like

Set Image Width and Height Using HTMLHow to Set Image Width and Height Using HTML Set a Background Image in HTMLAdd a Background Image to a Website: Step-by-Step Tutorial Create Redirects in HTMLHow toCreate Redirects in HTML Insert Images with HTMLHow toInsert Images with HTML Create a Simple CSS Stylesheet Using NotepadHow toCreate a Simple CSS Stylesheet Using Notepad Embed PicturesHow to Embed Images in Documents and Websites Insert a Line in HTMLHow to Create a Horizontal Line in HTML Change Text Color in HTMLHow to Change Text Color in HTML and CSS Change Size of Header in CSSHow to Adjust Header Size in CSS: Easy Font Property Guide Change the Button Color in HTMLHow toChange the Button Color in HTML Create a Dropdown Menu in HTML and CSSHow toCreate a Dropdown Menu in HTML and CSS Resize an Image in Adobe PhotoshopHow toResize an Image in Adobe Photoshop Upload Your Own Fonts to HTML Using CSSHow toUpload Your Own Fonts to HTML Using CSS Put Video on a Web PageHow toPut Video on a Web Page Advertisement

Expert Interview

Thanks for reading our article! If you'd like to learn more about dealing with HTML, check out our in-depth interview with Jessica Andzouana.

References

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
  2. ↑ Jessica Andzouana. Software Engineer. Expert Interview
  3. ↑ https://www.w3schools.com/html/html_iframe.asp
  4. ↑ https://imagekit.io/blog/how-to-resize-image-in-html/
  5. ↑ https://www.w3schools.com/tags/tag_iframe.ASP
  6. ↑ https://www.w3schools.com/tags/tag_iframe.ASP
  7. ↑ https://www.w3schools.com/tags/tag_iframe.ASP
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
  9. ↑ https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

About This Article

Jessica Andzouana Co-authored by: Jessica Andzouana Software Engineer This article was co-authored by Jessica Andzouana and by wikiHow staff writer, Travis Boylls. Jessica Andzouana is a Software Engineer based in the San Francisco Bay Area. With over five years of professional experience in front-end development, digital art, and design, she is passionate about emerging technologies such as blockchain and AI. Her background as both a programmer and artist, paired with a highly design-conscious mindset, provides her a fresh perspective and unique skill set to produce creative solutions in her field. She works at Alcacruz as a Software Engineer, and received a dual BS/BA degree from Santa Clara in Computer Science and Studio Art. This article has been viewed 178,828 times. How helpful is this? Co-authors: 37 Updated: May 2, 2025 Views: 178,828 Categories: HTML
  • Print
  • Send fan mail to authors
Thanks to all authors for creating a page that has been read 178,828 times.

Is this article up to date?

Yes No Advertisement Cookies make wikiHow better. By continuing to use our site, you agree to our cookie policy. Jessica Andzouana Co-authored by: Jessica Andzouana Software Engineer Click a star to vote Co-authors: 37 Updated: May 2, 2025 Views: 178,828

Quizzes & Games

Am I Smarter than a 5th Grader QuizAm I Smarter than a 5th Grader QuizTake QuizEngagement Ring QuizEngagement Ring QuizTake QuizHow Tall Will I Be QuizHow Tall Will I Be QuizTake QuizBedroom Aesthetic QuizBedroom Aesthetic QuizTake QuizCan We Guess How Tall You Are QuizCan We Guess How Tall You Are QuizTake QuizWhat Is My Face Shape QuizWhat Is My Face Shape QuizTake Quiz

You Might Also Like

Set Image Width and Height Using HTMLHow to Set Image Width and Height Using HTMLSet a Background Image in HTMLAdd a Background Image to a Website: Step-by-Step TutorialCreate Redirects in HTMLHow toCreate Redirects in HTMLInsert Images with HTMLHow toInsert Images with HTML

Featured Articles

13 Types of Hairlines for Men and Women (And How to Maintain Yours)13 Types of Hairlines for Men and Women (And How to Maintain Yours)Which of the 8 Face Shapes Do You Have? Helpful Tips & Style GuidanceWhich of the 8 Face Shapes Do You Have? Helpful Tips & Style GuidanceMental Illness TestMental Illness TestEnjoy the HolidaysHow toEnjoy the Holidays Get 250 Grams of Protein Daily: Best Foods, Meal Plans & MoreHow to Get 250 Grams of Protein Daily: Best Foods, Meal Plans & MoreAm I Girly QuizAm I Girly Quiz

Trending Articles

Let Us Rate You 1-10: Attractiveness Scale QuizLet Us Rate You 1-10: Attractiveness Scale QuizCan We Guess If You're Single or Taken?Can We Guess If You're Single or Taken?How Rare Is My Birthday QuizHow Rare Is My Birthday QuizHow Nonchalant Am I QuizHow Nonchalant Am I QuizAm I a Gigachad or Totally Chopped?Am I a Gigachad or Totally Chopped?Make OutHow toMake Out

Featured Articles

200 Fun, Flirty, & Deep Questions to Get to Know a Guy Better200 Fun, Flirty, & Deep Questions to Get to Know a Guy Better Tighten Skin Under Your Chin: Natural or Surgical OptionsHow to Tighten Skin Under Your Chin: Natural or Surgical OptionsWhat Would My Nickname Be QuizWhat Would My Nickname Be Quiz21 Common Hand Signs & Gestures (& What They Mean)21 Common Hand Signs & Gestures (& What They Mean)170+ Best Useless Facts That Sound Like Lies170+ Best Useless Facts That Sound Like LiesIs He Interested In Me QuizIs He Interested In Me Quiz

Featured Articles

15 Signs Your Ex Misses You (and What to Do About It)15 Signs Your Ex Misses You (and What to Do About It) Observe Hanukkah (From Candle Lighting to Latke Frying)How to Observe Hanukkah (From Candle Lighting to Latke Frying)165+ "You Are Special" Quotes For Friends, Family, Partners & More165+ "You Are Special" Quotes For Friends, Family, Partners & More115+ Brain Teasers For Adults & Kids (With Answers!)115+ Brain Teasers For Adults & Kids (With Answers!)When Will I Get My First Kiss QuizWhen Will I Get My First Kiss Quiz17 Believable Excuses to Miss Class At the Last Minute17 Believable Excuses to Miss Class At the Last Minute

Watch Articles

Wrap a Round GiftHow toWrap a Round GiftSteam in an OvenHow toSteam in an Oven Make Plant-Based Meat: 4 Incredible RecipesHow to Make Plant-Based Meat: 4 Incredible RecipesClean a Silver NecklaceHow toClean a Silver Necklace4 Easy Ways to Open a Can of Soda4 Easy Ways to Open a Can of SodaPart Your HairHow toPart Your Hair

Trending Articles

Have I Met My Soulmate Yet QuizHave I Met My Soulmate Yet QuizAm I a Furry QuizAm I a Furry QuizAm I Annoying QuizAm I Annoying QuizHow Weird Am I QuizHow Weird Am I Quiz180 Good Comebacks & Savage Roasts to Win Any Argument180 Good Comebacks & Savage Roasts to Win Any ArgumentWhat Are the Gay Male Body Types (And Which Do You Have?)What Are the Gay Male Body Types (And Which Do You Have?)

Quizzes & Games

College Grad Intelligence Test: Can You Score An A+?College Grad Intelligence Test: Can You Score An A+?Take QuizMusic Notes & Symbols TestMusic Notes & Symbols TestTake QuizAm I Smart QuizAm I Smart QuizTake QuizWhat Is My Kibbe Body Type QuizWhat Is My Kibbe Body Type QuizTake QuizWhat Instrument Should I Play QuizWhat Instrument Should I Play QuizTake QuizWhat's My Hair Type QuizWhat's My Hair Type QuizTake Quiz wikiHow
  • Categories
  • Computers and Electronics
  • Internet
  • Website and Blog Creation
  • Markup Languages
  • HTML
wikiHow Newsletter You're all set! Helpful how-tos delivered toyour inbox every week! Sign me up! By signing up you are agreeing to receive emails according to our privacy policy.
  • Home
  • About wikiHow
  • Experts
  • Jobs
  • Contact Us
  • Site Map
  • Terms of Use
  • Privacy Policy
  • Do Not Sell or Share My Info
  • Not Selling Info
  • Contribute

Follow Us

×

wikiHow Tech Help:

Tech troubles got you down? We've got the tips you need

Subscribe You're all set! X --647

Từ khóa » Html Iframe Adjust Height To Content