Q. I want to embed a website into my class, but it doesn't offer any sort of embed code! Can I still embed it somehow?
A. Even if a specific site does not offer an embed code (such as a Google Site or a WikiSite), you may be able to add it to a class using our Embed the Web tool, and a simple iFrame. Iframes are a great way to incorporate your favorite site, your blog, or an external resource into PowerSchool Learning, or to help other Teachers start a new course with content they have already created outside of PowerSchool Learning.
Creating an iFrame
An iFrame consists of two basic parts, your source url and different attributes defining components such as the height and width, styling, border and other options for customization. To create an iFrame
1. Start with the code listed below:
- <iframe src="INSERT YOUR URL HERE" height='800px' width='750px'></iframe>
2. Copy the url of the site you would like to embed, and paste it into the INSERT YOUR URL HERE area of the code, for example:
- <iframe src="https://mywikispace.wikispaces.com" height='800px' width='750px'></iframe>
3. Adjust the height and width attributes to fit the size you would like the embed to appear in your class. The above listed sizes work great for a One Column Layout page. For a smaller embed, you may want to try:
- <iframe src="https://mywikispace.wikispaces.com" height='500px' width='450px'></iframe>
And that's it! You can find out a bit more about iframes, and the different Attributes you can add right here. This iframe generator makes things even simpler. Just choose your options, insert your url, and select Generate iFrame.
Add to your Class using Embed the Web
1. Now that you've generated your new iFrame, embed to PowerSchool Learning through the Add Content Block menu, via the Embed the Web tool.
2. Copy your iFrame embed code, and paste it into the If you already have a code you would like to use... box.
3. Hit the Next button, and you should be all set to Title, Describe, choose a placement for your Embed the Web content block.
4. Hit Save to keep your changes. Below, we've embedded the PowerSchool Learning homepage as an example, in a Traditional Two layout. You can scroll down to see more of the page, navigate to different areas of the site, and adjust the code at any time!
What if it doesn't work? Help!
Oh no! Not seeing your site appearing in that content block? Just seeing an empty white block? There are a couple of things that may be happening:
Did you see a message that looks like this when adding your iFrame embed code?
Any non SSL (http content) that you embed in PowerSchool Learning may prompt a Mixed-Content Warning in Browsers such as Chrome, Firefox, and Internet Explorer. You can usually enable mixed-content on your page to allow that site to be displayed within your PowerSchool Learning page (which does use SSL, or an https url). In Chrome, select the small shield icon that appears in the upper right-hand corner of your browser bar, then select Load Unsafe Script and Reload this Page to see all available content.
X-Frame Origin Errors
Still not up and running? Some websites and organizations choose to block their content from being displayed in an iFrame. Unfortunately, if this is the case, there may not be a way to embed that site into PowerSchool Learning! In order to avoid potential security vulnerabilities, we block our own PowerSchool Learning classes from being displayed in an iFrame, as do Google, Facebook, and many other organizations. To see if the site you are trying to embed blocks its content from iFrames, follow these steps:
- Right-click in your web browser and select Web Inspector or Inspect Element (depending on your browser type).
- Open the Console area to view any errors that have been generated within your class page. If the site provider for your embed does not allow their content to be displayed in an iFrame within other sites, you will see an error that reads "Refused to display 'https://www.yourembeddedsite.com' in a frame because it is set to 'X-Frame-Options' to 'SAMEORIGIN'.
Looking to add more third-party content to your PowerSchool Learning class? Don't forget to check out our Embed the Web library!