3 Ways To Resize IFrames In HTML - WikiHow

Skip to ContentQuizzes

• PRO Courses Guides New Tech Help Pro Expert Videos About wikiHow Pro Upgrade Sign In
• QUIZZES
• EDIT Edit this Article
• EXPLORE Tech Help ProAbout UsRandom ArticleQuizzes Request a New ArticleCommunity DashboardThis Or That GameForums Popular Categories Arts and EntertainmentArtworkBooksMoviesComputers and ElectronicsComputersPhone SkillsTechnology HacksHealthMen's HealthMental HealthWomen's HealthRelationshipsDatingLoveRelationship Issues Hobbies and CraftsCraftsDrawingGamesEducation & CommunicationCommunication SkillsPersonal DevelopmentStudyingPersonal Care and StyleFashionHair CarePersonal HygieneYouthPersonal CareSchool StuffDating All Categories Arts and EntertainmentFinance and BusinessHome and GardenRelationship Quizzes Cars & Other VehiclesFood and EntertainingPersonal Care and StyleSports and Fitness Computers and ElectronicsHealthPets and AnimalsTravel Education & CommunicationHobbies and CraftsPhilosophy and ReligionWork World Family LifeHolidays and TraditionsRelationshipsYouth
• LOG IN

  Log in

  Social login does not work in incognito and private browsers. Please log in with your username or email to continue. Facebook Google wikiHow Account No account yet? Create an account
• RANDOM

• Home
• Random
• Browse Articles
• Learn Something New
• QuizzesHot
• Forums
• Courses
• Happiness Hub
• Play Games
• This Or That Game
• Train Your Brain
• 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

• Categories
• Computers and Electronics
• Internet
• Website and Blog Creation
• Markup Languages
• HTML

How to Resize iFrames in HTML Download Article Explore this Article methods 1 Using HTML 2 Using CSS 3 Using a Division Class Other Sections Questions & Answers Related Articles Expert Interview References Co-authored by Jessica Andzouana and Travis Boylls

Last Updated: August 28, 2024 Fact Checked

Download Article 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. 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 168,417 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

Download Article

1. 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. 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. 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. 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. 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 (">").[2]
   • 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.[3]
   • 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. 5 Ensure there is a closing tag. Immediately after the iframe tag with all the attributes, there should be a closing tag.[4] 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. 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. 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.
Advertisement

Method 2 Method 2 of 3:

Using CSS

Download Article

1. 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. 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. 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.[5] 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. 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. 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.[6] Your CSS iframe element should look something like the following: iframe { width: 300px; height: 200px; overflow: auto; }
6. 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. 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. 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.
Advertisement

Method 3 Method 3 of 3:

Using a Division Class

Download Article

1. 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. 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. 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. 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. 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. 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. 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. 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. 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.[7] Your HTML document with the CSS should look something like the following: [8] <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. 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. 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.
Advertisement

Community Q&A

Search Add New Question

• Question What is HTML coding for books? 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 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 0 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

How toMake a HTML Link Button How toInsert Images with HTML 4 Ways to Add a Link to a Picture How toRun a HTML File in Visual Studio Code How toInsert Spaces in HTML How toCreate a Simple Web Page with HTML How toWrite HTML Code How toRun a HTML File How toChange the Button Color in HTML Add a Background Image to a Website: Step-by-Step Tutorial How toOpen HTM Files Simple Ways to Find the Hex Code of Any Color on Your Computer How toMake a Birthday Card with HTML and CSS How to Copy HTML Source Code on Your Computer, iPhone, or Android 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. ↑ https://www.w3schools.com/html/html_iframe.asp
3. ↑ https://imagekit.io/blog/how-to-resize-image-in-html/
4. ↑ https://www.w3schools.com/tags/tag_iframe.ASP
5. ↑ https://www.w3schools.com/tags/tag_iframe.ASP
6. ↑ https://www.w3schools.com/tags/tag_iframe.ASP
7. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
8. ↑ https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

About This Article

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 168,417 times. How helpful is this? Co-authors: 33 Updated: August 28, 2024 Views: 168,417 Categories: HTML

• Print
• Send fan mail to authors

Thanks to all authors for creating a page that has been read 168,417 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. Co-authored by: Jessica Andzouana Software Engineer Click a star to vote % of people told us that this article helped them. Co-authors: 33 Updated: August 28, 2024 Views: 168,417

Quizzes

Do I Have a Dirty Mind QuizTake QuizAm I a Good Kisser QuizTake QuizRizz Game: Test Your RizzTake QuizWhat's Your Red Flag QuizTake QuizAm I Smart QuizTake QuizHow Insecure Am I QuizTake Quiz

You Might Also Like

How toMake a HTML Link ButtonHow toInsert Images with HTML4 Ways to Add a Link to a PictureHow toRun a HTML File in Visual Studio Code

Featured Articles

How toFeng Shui Your BedroomAm I In Love QuizHow & Where to Apply Perfume (Plus, Common Mistakes to Avoid)How toKnow if You Are Ready for a RelationshipHow toDevelop a Thick SkinHow toCelebrate Hanukkah

Trending Articles

How to Wrap a Box Like a ProHow toCelebrate HanukkahHow toDo Simple and Cute HairstylesHow toGet Into the Spirit of Christmas when You Don't Feel It Any MoreWhat Does the Thumbs Up 👍 Emoji Mean & Why Is It So Controversial?How to Make Your Girlfriend Fall For You Again (And Keep Her for Good!)

Featured Articles

How toTell if a Diamond is RealWhich Hogwarts House Do I Belong In QuizWhat to Do When You Get a Gift You Don't LikeWhat Kind of Reality Check Do I Need QuizHow toMake a MenorahHow toGet to Sleep on Christmas Eve

Featured Articles

21 Ways to Feel More Comfortable in Your Own SkinHow toCelebrate ChristmasHow toMake ShawarmaHow toMake a Chicken BurgerHow to Tell if a Guy Has a Crush on YouHow to Wrap a Present Like a Pro

Watch Articles

How toThicken SyrupHow toStraighten Your HairHow toClean Metal JewelryHow toSeason Chicken3 Unique Ways to Re-Invent the Neckline of a ShirtHow toMoisturize Your Face Naturally

Trending Articles

How toTell When a Guy is No Longer Interested in YouHow toCelebrate KwanzaaWhat Does “Much Appreciated” Mean? Plus, Alternatives for Business EmailsHow to Trim, Slice, & Cut the Perfect BrisketHow toFeel More AttractiveHow toMake Your Mascara Look Great

Quizzes

What Disney Princess Am I QuizTake QuizDo I Have a Phobia QuizTake QuizGuess My Age QuizTake QuizAm I a Genius QuizTake QuizDepression TestTake QuizWhat Human Emotion Am I QuizTake Quiz

• 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 Pro:

Level up your tech skills and stay ahead of the curve

Let's go! X --1105