Embedding an iFrame

The Upanup Drupal 9 Guide website provides the ability to embed iframes through the WYSIWYG editor, most notably for GIS maps.

  1. Begin by editing/creating the new piece of content that you would like to embed the iFrame into.
  2. Add a new Content row to your page.
  3. Copy the embed code from the iFrame that you’d like to embed (i.e. from ArcGIS)
    Image
    Screenshot of iFrame embed window
  4. Within the WYSIWYG text editor, select the Source button.
  5. Paste the embed code that you have copied into the Source editor.
    Image
    screenshoot of Drupal content editor with embed code
  6. Save or publish your page and the iFrame should appear.

 

When embedding an iframe, please ensure the following:

  • The iframe tag is opened and closed: <iframe></iframe>
  • The iframe has a valid source attribute: <iframe src=”http://iframesource.com“></iframe> (replace with actual iframe src URL)
  • An appropriate defined height attribute has been included (the suffix of ‘px’ can be included or not in the height value): <iframe src=”http://iframesource.com” height=”400″ ></iframe>
    IMPORTANT MOBILE NOTE: it can be difficult for users to scroll past a map that is taller than the current resolution, meaning if the height resolution of the device is 480px and the map is 500px tall, the user may get into a situation where they cannot actively scroll outside the iframe element to reach below or above the iframe.  Because of this, it is mobile best practice to keep iframes below 400px tall where possible.
  • A relative width of 100% has been included: <iframe src=”http://iframesource.com” height=”400″ width=”100%”></iframe>
    IMPORTANT MOBILE NOTE: using the relative 100% width will ensure that the iframe renders in a responsive manner depending on the width resolution of the device being used.
  • Additional attributes of marginheight (0), marginwidth (0), frameborder (0) and scolling (no) with respective values (in parenthesis) are included to reset display parameters: <iframe src=”http://iframesource.com” height=”400″ width=”100%” frameborder=”0″ marginheight=”0″ marginwidth=”0″ scrolling=”no”></iframe>

As shown above, the following example iframe element in it’s entirety should look something like:
<iframe src=”http://iframesource.com” height=”400″ width=”100%” frameborder=”0″ marginheight=”0″ marginwidth=”0″ scrolling=”no”></iframe>

 


 

Our team at Upanup is always striving to make this guide better and more accessible for our clients. We'd love to hear from you, so we can continue to improve this guide. 

Feedback