Embed Code

Canvas Files

Things I can Embed:

Desmos & Phet

Giphys

NearPods (all)

Google Docs

Other tools

Extremely Basic iFrame Code: <iframe src="https://www.google.com"></iframe>

Note: There is no "Element Content." The students are going to see the content in the src.

Extremely Basic iFrame Code: <iframe src="https://www.google.com"></iframe>

Adjustments to iFrame Code: <iframe src="https://www.google.com" width="RRRpx" height="SSSpx"></iframe>

Note: There are a LOT of code that you can include here, but these are the two that make the iFrames functional for us.

For a Live NearPod Embed:

1. Launch the NearPod as live.
2. Use the Advanced Code Bits Notebook, and copy the base code for Embedding NearPods.
3. Replace the template text in orange with the join code link from your live NearPod.
4. Paste the new code into the embed in the RTE.

Advanced Code Bits Notebook

Return to Embeds

URL in code

For teachers: This url tells the computer where the end point is. Coder's Definition: the end point of the src function.

Definition from CodeCademy

Height identifier

For teachers: How tall do you want it? You can enter in pixels as shown, for our students this should top out about 600. Or you can put it in as 100% which will fill the space.

"iFrame tag"

For teachers: This means that you are cutting a hole in Canvas. Coder's Definition: <iframe> tag loads another HTML document

Definition from TechTarget

Many academic engagement websites, including Desmos and Phet have a section under the share button that is called "embed" or labelled </> that's where you get your embed code.

Desmos Example:

Phet Example:

Advanced Note: There are widths and heights in the code. If you know what your students' resolution is you can made them fit their screens better.

We also need to remember the social and tjazz it up. GIPHY is a great website with some of them. Under the share button is the < > embed button where you can get the code to copy it from.

Giphy Example:

Giphy is one example, but there are other websites with similar things to embed.

Warning: This is a third party site, and not as regulated, so make sure you're choosing appropriate giphs.

Width identifier

For teachers: How wide do you want it? You can enter in pixels as shown, for our students this should top out about 800. Or you can put it in as 100% which will fill the space.

"iFrame tag"

For teachers: This means that you are cutting a hole in Canvas. Coder's Definition: <iframe> tag loads another HTML document

Definition from TechTarget

Embedding Canvas Files:

NOTE: The best thing to do is to put the files in your User Profile.

• This does mean you'll need to download them and upload them directly into it.
• This means that students should be able to see them across courses, no need to copy them and redo them.

How to Do It:

1. In the first tab, have the Files location in your Canvas user open.
2. In a second tab, at the location you want to embed the Canvas file use the insert media function (In New Quiz this is literally insert media, in anything else, it's the cloud with the brackets).
3. Paste the Canvas Embedding Base Code from the Advanced Design Notebook🔗
4. ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍Copy the item location from the files page (Right click, copy url)
5. Replace the URL in the gobbledegook from the http through the end of the second hashtag series with the URL you just copied.
6. Then push done/go/embed to insert the file.

URL in code

For teachers: This url tells the computer where the end point is. Coder's Definition: the end point of the src function.

Definition from CodeCademy

Embedding Documents and other "Not-Slides" from Google

1. Use the "share" and "publish to web" to get the embed code (Just like with slides.)
2. Alter the code to include a "width" and a "height".

<iframe src="https://docs.google.com/document/d/e/2PACX-1vRpnZu-nIkNmqoTK6-op7LNWECEOdfNABiT45Sq7qWebqmGeoF2NBq_TNWOm8i1wIBfXGEG5KHuU1QQ/pub?embedded=true" height="600" width="800"></iframe>

"src" in code

For teachers: src means source, so where is the computer looking for the thing it needs? Coder's Definition: src is short for source. After src=” you fill in the desired URL.

Definition from CodeCademy

Yes.

Do you have a premium NearPod?

Watch

No.

Yes.

Does it need to be graded?

Embed it in an assignment, and ask for a screenshot of the final page.

No.

Do you need it to be self-paced or live?

Embed it in a page.

Info

View

"src" in code

For teachers: src means source, so where is the computer looking for the thing it needs? Coder's Definition: src is short for source. After src=” you fill in the desired URL.

Definition from CodeCademy

"iFrame tag"

For teachers: This means that you are cutting a hole in Canvas. Coder's Definition: <iframe> tag loads another HTML document

Definition from TechTarget

Other Sources:

Many sites have the ability to be embedded naturally. Look around for the "embed" or the </>. If you really can't find a built in location, you can always use an iFrame generator🔗.

"src" in code

For teachers: src means source, so where is the computer looking for the thing it needs? Coder's Definition: src is short for source. After src=” you fill in the desired URL.

Definition from CodeCademy

"iFrame tag"

For teachers: This means that you are cutting a hole in Canvas. Coder's Definition: <iframe> tag loads another HTML document

Definition from TechTarget

"iFrame tag"

For teachers: This means that you are cutting a hole in Canvas. Coder's Definition: <iframe> tag loads another HTML document

Definition from TechTarget

URL in code

For teachers: This url tells the computer where the end point is. Coder's Definition: the end point of the src function.

Definition from CodeCademy

"iFrame tag"

For teachers: This means that you are cutting a hole in Canvas. Coder's Definition: <iframe> tag loads another HTML document

Definition from TechTarget