Jump to content

How to make a scrollable iframe?

Recommended Posts

  • 2 weeks later...
  • Replies 1
  • Created
  • Last Reply

I visited the page you sight and saw that the iframe is not displaying. Perhaps I can help.

Using responsive code I developed for myself, I devised this Pen on CodePen using your source url. You will find all the necessary HTML and CSS in the pen.

To put the iframe on your site do the following. Put an embed block on the page where you want the iframe. In the code area enter all the HTML code you find in the pen. You can reach the code area by clicking on the </> icon at the far right of the Embed dialog text box.

In Custom CSS enter all the CSS you find in the pen. If you want the iframe sized differently (say 600x480) from that specified in the pen do the following. In the HTML, in the class attribute of the inner div, change responsive-wrapper-wxh-900x850 to responsive-wrapper-wxh-600x480. In Custom CSS, set max-width and max-height to 600px and 480px respectively, and at the appropriate place, enter:

     responsive-wrapper-wxh-600x480 {
        padding-bottom: 80%;        /* w/h = 480/600 = 80% - set aspect ratio */

This will give you your responsive iframe.

Note the following about the iframe attributes you use above.

the frameborder attribute is not supported in HTML5;
the marginheight attribute is not supported in HTML5;
the marginwidth attribute is not supported in HTML5;
the width and height attributes should not be specified in the iframe tag; doing so will destroy the responsiveness; and
the scrolling attribute is not supported in HTML5.

See the w3schools article HTML <iframe> Tag.

These characteristics, along with border, padding, and margin, are set in CSS. With the responsive code you should not need horizontal scrolling. If you find that you do, use the CSS overflow-x property, thus overflow-x: scroll;. See the MDN article overflow-x.

For explanatory remarks about the code and citations to the source articles from which I derived it, see the comments in the code and the comments in the pen (click on the "comments" link in the links bar at the lower left of the pen).

Let me know if you require further help. Let me know how it turns out for you.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.