How to add media to your online course

You can insert these in your section editor using Markdown.

https://codio.com/codio-units/java-example is a project that you can fork into your own Codio account and shows you how to create code tests and setup automatic marking. We would also recommend that you check out our Guides Cheat Sheet and import into your Codio account to review. See here for more information on importing.

Images

Inserting an image is similar. Here are some examples. PNG and JPG image types are supported. Note that the 2nd and 3rd examples point to images within your project.

Generally speaking, you should put your images in the .guides/img folder in order to keep the rest of your workspace free of extraneous content for the benefit of the student.

1
2
3
![optional alt tag](http://any-url-you-like.png)
![](image-in-project-root.jpg)
![](.guides/img/best-place-for-images.png)

Videos

Including embedded videos are also possible using the standard <iframe> html tag.

YouTube

If you wish to embed a YouTube video, go to the Share option and select ‘Embed’ to obtain the code snippet

authtoken

1
<iframe width="560" height="315" src="//www.youtube.com/embed/1JNhoVbmNAo" frameborder="0" allowfullscreen></iframe>

Vimeo

If you wish to embed a Vimeo video, go to the Share option and select 'Embed’ to obtain the code snippet

authtoken

1
<iframe src="//player.vimeo.com/video/110479088" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/110479088">Codio - Innovation in Computer Programming Education</a> from <a href="http://vimeo.com/user20752628">Codio</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Creating a hyperlink on a piece of text is easy.

1
Go to [Google](google.com) to look stuff up.

iframes

You can also embed an iframe using the standard <iframe> html tag.

If you wish to embed from Google Docs, go to File>Publish to Web and select 'Embed’ to obtain the code snippet