Embed Content on a Page

Embedding content onto your site is easy with the CKEditor rich text editor. You can embed applications like Google Calendars, Forms, Tableau content, and University job listings using an iframe. This guide will walk you through the process.

Step 1: Get the Embed Code

To embed an application, you'll first need its iframe embed code. Most applications provide guides on obtaining this code. Here are some popular resources:

•  Google Docs, Sheets, Slides & Forms
• Google Calendar
• Tableau content
•  U of M job listings

Step 2: Embed the Content on a Page

1. Edit the Page: Open the page where you want to embed the content.
2. Access the HTML Source: Click the Source button in the CKEditor toolbar. This will display the HTML code of your page.
   • Tip: Look for a toolbar button labeled "Source."

1. Paste the Embed Code: Locate where you want the embedded content and paste the iframe embed code there.
2. Save the Page: Click the save button to publish your changes. Your embedded content should now appear on the page.

Step 3: Adjust the Size of the Embedded Content

If the embedded content doesn’t fit well, you can adjust its size by editing the iframe code:

1. Edit the Page: Open the page for editing and click the Source button to access the HTML code.
2. Locate the iframe Code: Look for the iframe code, which starts with <iframe and ends with </iframe>.
3. Adjust Width and Height:
   • To adjust the width, change the value in width="number".
   • To adjust the height, change the value in height="number".
   • Example: <iframe width="800" height="600" src="..."></iframe>
   • Tip: Use this aspect ratio calculator to maintain proper dimensions.
4. Save the Page: Your changes will now reflect the adjusted size of the embedded content.