Embedding iframes on mass.gov

Iframes allow you to embed another HTML page hosted elsewhere onto a Mass.gov page. Some examples might include a data visualization from Data Studio, a map from Esri, or a custom interactive widget built using Github Pages (see more at Creating iframe Code on Github Pages).

The iframe feature is available on Information Details and Organization pages.

Mass.gov maintains a list of approved iframe host sites and authors should ensure accessibility by running the embedded content through a web accessibility checker.

If your source is not on the approved list, try moving the iframe content to one of the approved hosts or fill out an iframe request form to get approval.

Similar to embedding images, videos, and dataviz in the CMS, iframes allow you to enter a caption, configure alignment and width, and wrap text.

The most noteworthy aspect of configuration is the iframe height. How the iframe content height grows or shrinks based on the screen size is completely up to its source code, and height may vary substantially based on the screen width of the visitor's device. Further, iframe content may change in size based on how a visitor interacts with it.

Here are the three options you can choose from in order of preference:

Flexible height iframes. You can only use this if you have control of the source code of the content being added with the iframe. Some code needs to be added to the iframe source to allow it to interact with the Mass.gov page so that the iframe on Mass.gov adjusts its size when the iframe content changes.

Fixed aspect ratio. This option is useful for data visualizations and other visuals where the aspect ratio of height to width will stay approximately the same regardless of how wide or narrow the visitor’s browser window is, whether they are on a desktop or mobile device.

Fixed height. This is the least flexible option but if your iframe content is very short and small, this may be a viable choice. If the height option you choose does not fit the iframe content, visitors may see a scroll bar within the iframe area. This usually will result in a poor user experience.

We recommend you try different height options and test on both desktop and mobile devices to eliminate any scrolling within the iframe area.

iframe help text in the CMS

Was this article helpful?

Tell us what you think.