Embedding external content using iframe
To embed content from external websites such as interactive map, video from YouTube or specific web page, use the iframe feature in HR.info.
Example 1: Embed or insert iframe as full page
In the following steps we will use the “Disaster severity estimation index” interactive map as an example from CartoBD website and insert it into Nepal HR.info website.
- Login to Nepal website.
- Create a new page as shown in the screenshot below or open an existing page where you need to insert the interactive map.
- Provide title of the page for instance “Nepal - Disaster severity estimation index”
- Underneath the Body section from the ‘Text format’ drop-down list, select ‘WYSIWYG trusted’. If not selected the iframe will not display correctly in the page.
In the Body section of the page, click on the source icon where you will be adding the iframe code for embedding the interactive map. See the screenshot below.
Paste into the Body section your iframe code that you have copied from your content source, it should look similar to the example below:
<iframe allowfullscreen width='640' height='520' frameborder='0' src='URL'></iframe>
Next, rework the code a bit so that it matches this example:
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" allowfullscreen src='URL'></iframe>
That is, remove width, height, and frameborder parameters, and keep only allowfullscreen and the respective URL. Add
class="embed-responsive-item"to the iframe tag. Envelop the <iframe> tag in a <div> tag that will ensure them embedded iframe is responsive. If your content has a ratio of 16:9, replace
embed-responsive-16by9. Other options are
embed-responsive-1by1. It may not be a perfect fit, but select whichever ratio fits your content best.
Note: If you want your dashboard to allow for a full screen display, you need to include the allowfullscreen attribute in the iframe code, as per the example above. (The attribute can also be added as allowfullscreen="true" or allowfullscreen="yes".
Note: the URL for the iframe must use the HTTPS protocol, not HTTP, for the iframe to display. HumanitarianResponse.info uses a secure protocol (HTTPS). If the page you want to embed is not available via HTTPS, you will need to provide a link as newer browsers will prevent HTTP iframes from being displayed. This is because of a security feature in web browsers which prohibits insecure pages (HTTP) from being embedded into secure pages (HTTPS). Additional technical details are available if you would like to read more about it.
Provide other information such as cluster/sector and hit ’Publish’ button to save the page.
If you have followed the above steps correctly, then you should be able to see the newly embedded map below.
Example 2: Embed iframe into a block on your space/page
- If you would like to add the iframe within a block onto your space/page, then click on customize button at the bottom of your space/page
- click on the "+" button and select first "custom content" then add "Free text"
- Then follow the same steps 3 to 6 as indicated above
- Click on Finish
- Remember to hit Save at the bottom of your space/page