Course Content

Full page iframe "takeover" on a custom page

Murray Gray in Course Content

Jun 06, 2023 - 2 min read. .

Table of Contents

Adding a full page iframe to a custom page

Here's how to add a full page iframe to a custom page. The benefit of this is that you can include any remote webpage you like into a custom page inside your course.

Note that your remote page URL will still be visible in the page code, and a determined individual could still determine where your remote page is.

  • Edit the course you want to add your iframe to
  • Go to Step 4. Customize Your Course Pages and pick the page you want to add the iframe to. (Most people people do this on a custom page, but in fact you can do this on any page of your course.
  • Remove all existing blocks from your page, and add a HTML/JS block from the Advanced block category. Just drag it over onto the page
  • Edit the block and add the following code to it:
<!DOCTYPE html>
 <div id="container"> <iframe id="myIframe" src="YOUR_REMOTE_PAGE_URL_HERE"></iframe> </div>
 <style> .page-wrapper .relative.px-8 { padding: 0; } .page-wrapper { max-width: unset; } </style> 
<script> // Get references to the container and iframe elements var container = document.getElementById("container"); 
var iframe = document.getElementById("myIframe"); 
// Set styles for container = "100vw"; = "100vh"; 
// Set styles for iframe = "100%"; = "100%"; = "none"; 
// Adjust iframe height when a message is received from the iframe 
window.addEventListener("message", function(event) { 
if ( && { = + "px"; } }
  • Replace "YOUR_REMOTE_PAGE_URL_HERE" in the code above with your remote page address.