HTML Iframe Generator and Styler

This free online tool will help you compose the HTML code for your your iframe tags. All you have to do is set the link, size, scrolling and the border and finally hit the Generate button to get the markup.

Preview and tune your generated iframe HTML code in the interactive editor below.

An HTML iframe, short for “inline frame” is an HTML element used to embed another web page or content within the current page. It’s like a window into another website, allowing you to display external content seamlessly, often used to add maps, social widgets, videos and other media players.

Basic Syntax:

• To create an iframe, use the<iframe>tag.
• Specify the URL of the page you want to embed using thesrcattribute.
• Set the dimensions (width and height) of the iframe.
• Example:
  

  <iframe src="https://html-css-js.com"
   width="600" height="400" 
   title="The client-side of the web">
  </iframe>
  

Responsive Iframes:

• To make iframes responsive (adjust to different screen sizes), you can use CSS.
• Wrap the iframe in a container (e.g., a<div>).
• Apply CSS rules to the container to maintain aspect ratio and adapt to the available space.
• Apply the.responsive-iframe class to your container.

Responsive Iframe HTML Code:

Check out the live demo. Drag the edge of your browser window to change its size.

<div class="responsive-iframe">
  <iframe width="420" height="315" 
    src="https://rubikstutorial.com" 
    frameborder="0">
  </iframe>
</div>

Responsive Iframe CSS Styles:

.responsive-iframe {
    position: relative;
    padding-bottom: 56.25%;
        /*aspect ratio 16:9 */
    height: 0; 
    overflow: hidden;
}
.responsive-iframe iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

Scrollbars and Borders:

• You can control whether the iframe displays scrollbars using the scrolling attribute (scrolling="yes" or scrolling="no").
• To remove the iframe border, set frameborder="0".

Remember that cross-origin restrictions apply when embedding content from different domains. Ensure that the embedded page allows framing (via theX-Frame-Optionsheader) to avoid issues.