How to Embed iFrame Tool in Open edX

Overview

The iFrame (Inline Frame) tool allows you to seamlessly integrate external, ungraded exercises, simulations, interactive maps, or third-party web tools directly into the body of your course content. It embeds a self-contained window inside a text block, displaying external content without forcing learners to open a new tab or navigate away from the platform player.

Step 1: Deploy the iFrame Component

In the current platform release, the iFrame template is nested directly within your primary text-authoring options.

Procedures:

1. Open your course run in Studio.
2. Navigate via your Course Outline into the specific Unit where you want to embed the external asset.
3. Scroll down to the Add New Component dashboard panel.
4. Click the Text tile.
5. From the expanded text templates menu, select IFrame Tool. A text block containing a default interactive window template will load immediately onto your page canvas.

[Image Placeholder: Screenshot of the modern Studio Unit Editor highlighting the 'Text' component tile and 'IFrame Tool' selection option]

Step 2: Configure the Source URL

To point the player frame to your specific asset, you must switch into the raw source code view.

Procedures:

1. Locate your newly added IFrame component block on the unit canvas and click Edit.
2. On the visual editor toolbar, click the HTML (source code icon) button. A raw code editing panel will open.
3. Locate the <iframe> element string within the code panel. It will look similar to this default template block:HTML

   <p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="402" height="402" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">You need an iFrame capable browser to view this.</iframe></p> 

4. Update the Source: Replace the placeholder URL inside the src="..." attribute with the exact link to your external tool.
   • Crucial Rule: The external tool link must explicitly begin with https://. Links using unsecure http:// configurations will fail to display in modern browsers due to mixed-content security blocks.
   • Note: Be careful not to accidentally delete the opening or closing straight quotation marks surrounding your URL string.
5. Click OK to commit the code modifications and return to the primary visual editor screen.

[Image Placeholder: Studio view of the open HTML source code modal showing the highlighted iframe src attribute line]

Step 3: Customize Text Context and Save

Before publishing, you can frame the window with instruction text or custom context paragraphs.

Procedures:

1. While still inside the component editor workspace, click above or below the shaded placeholder box representing your iframe.
2. Replace the default placeholder text with your own tailored assignment instructions, resource descriptions, or external citation links.
3. Click Save.
4. Click the Publish button in the right-hand unit status panel to push the integrated module live to the LMS.

Understanding Technical iFrame Attributes

You can fine-tune how the external window behaves by altering or appending attributes inside the opening <iframe> tag via the HTML source editor:

• src: (Mandatory) The absolute destination web address of the tool you are loading.
• title: (Mandatory for Accessibility) A brief, clear text description of what the iframe contains (e.g., title="Interactive Geometry Sandbox"). This allows screen readers to declare the block's purpose to visually impaired learners.
• width and height: Controls the physical dimensions of the window layout box, specified in pixels (e.g., width="600" height="450") or responsive percentages (e.g., width="100%").
• scrolling: Set this to "yes" if the external tool requires internal scroll bars to navigate, or "no" to lock scrolling down.
• Fallback Text: The sentence positioned between the opening <iframe> and closing </iframe> tags (e.g., "You need an iFrame capable browser...") only renders if a learner uses an outdated web browser that completely lacks iframe compatibility.